/* =========================
   GLOBAL / app.css
   ========================= */

@font-face {
    font-family: ClashGrotesk;
    src: url("/font/ClashGrotesk-Variable.ttf");
}


:root {
    --ds-primary: #7fa85a;
    --ds-primary-dark: #5f7f43;
    --ds-primary-soft: #eef5e8;
    --ds-text: #2c332d;
    --ds-text-strong: #202621;
    --ds-text-muted: #727b70;
    --ds-border: #d8dccf;
    --ds-surface: #ffffff;
    --ds-danger-bg: #fff1f2;
    --ds-danger-border: #fecdd3;
    --ds-danger-text: #be123c;
}

.page-container {
    padding-top: 70px;
}

body {
    font-family: 'ClashGrotesk' !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.w-100 {
    width: 100%;
}

.sport-form-group + .sport-form-group {
    margin-top: 18px;
}

.sport-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sport-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--ds-text-strong);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
}

.rz-card {
    width: 100%;
}

.sport-link-small {
    color: var(--ds-primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
}

    .sport-link-small:hover {
        text-decoration: underline;
    }

.sport-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.sport-input-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    font-size: 1rem;
    opacity: 0.75;
    pointer-events: none;
}

.sport-input {
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 56px;
    padding: 0 16px 0 46px;
    border-radius: 18px;
    border: 1px solid var(--ds-border);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ds-text);
    font-size: 0.96rem;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

    .sport-input::placeholder {
        color: #98a292;
    }

    .sport-input:focus {
        border-color: #9dc173;
        box-shadow: 0 0 0 4px rgba(157, 193, 115, 0.14);
    }

.sport-input-password {
    padding-right: 94px;
}

.sport-password-toggle {
    position: absolute;
    right: 12px;
    z-index: 2;
    border: none;
    background: transparent;
    color: var(--ds-primary-dark);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    padding: 6px 8px;
}

    .sport-password-toggle:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.sport-login-alert {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--ds-danger-bg);
    border: 1px solid var(--ds-danger-border);
    color: var(--ds-danger-text);
    font-size: 0.92rem;
    font-weight: 600;
}

.sport-login-loading {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 600;
}

.sport-login-loading-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00b0c6;
    animation: pulseDot 1.1s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .sport-input {
        height: 52px;
        font-size: 0.92rem;
        border-radius: 16px;
    }
}

.sport-register-row {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.sport-register-text {
    font-size: 0.92rem;
    color: #7b8378;
    text-align: center;
    font-weight: 600;
}

.rz-button.sport-register-button {
    width: 100%;
    height: 52px;
    border-radius: 16px !important;
    border: 1px solid #cfd8c6 !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #5f7f43 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

    .rz-button.sport-register-button:hover {
        background: #f4f8ef !important;
        border-color: #a8bf8a !important;
        color: #4f6d37 !important;
    }

.rz-button.sport-login-button {
    width: 100%;
    margin-top: 20px;
    height: 54px;
    border: none !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #7ea55a 0%, #6b8f49 100%) !important;
    box-shadow: 0 14px 28px rgba(126, 165, 90, 0.22);
    font-size: 0.94rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff !important;
}

    .rz-button.sport-login-button:hover {
        filter: brightness(1.03);
    }

    .rz-button.sport-login-button:focus {
        box-shadow: 0 0 0 4px rgba(126, 165, 90, 0.18) !important;
    }

/* ===== Radzen controls - Register / Light style ===== */

.register-radzen-control {
    width: 100%;
}

    .register-radzen-control.rz-dropdown,
    .register-radzen-control.rz-datepicker {
        width: 100%;
        min-height: 52px;
        border-radius: 16px;
        border: 1px solid #d9decd;
        background: #ffffff;
        box-shadow: none;
        transition: all 0.2s ease;
    }

        .register-radzen-control.rz-dropdown:hover,
        .register-radzen-control.rz-datepicker:hover {
            border-color: #a8be63;
        }

        .register-radzen-control.rz-state-focus,
        .register-radzen-control.rz-dropdown.rz-state-focus,
        .register-radzen-control.rz-datepicker.rz-state-focus {
            border-color: #93b255;
            box-shadow: 0 0 0 4px rgba(147, 178, 85, 0.14);
        }

    .register-radzen-control .rz-inputtext,
    .register-radzen-control input,
    .register-radzen-control .rz-dropdown-label {
        background: transparent !important;
        color: #2b342d !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0.97rem;
        padding: 0.9rem 1rem !important;
    }

        .register-radzen-control .rz-placeholder,
        .register-radzen-control .rz-dropdown-label.rz-inputtext-placeholder,
        .register-radzen-control input::placeholder {
            color: #98a08f !important;
        }

    .register-radzen-control .rz-dropdown-trigger,
    .register-radzen-control .rz-datepicker-trigger {
        color: #65725b !important;
        background: transparent !important;
        border-left: none !important;
        width: 44px;
    }

        .register-radzen-control .rz-dropdown-trigger .rzi,
        .register-radzen-control .rz-datepicker-trigger .rzi {
            font-size: 18px;
        }

    .register-radzen-control.rz-state-disabled {
        background: #f3f4ef !important;
        border-color: #e3e7d8 !important;
        opacity: 1;
    }

        .register-radzen-control.rz-state-disabled .rz-dropdown-label,
        .register-radzen-control.rz-state-disabled input,
        .register-radzen-control.rz-state-disabled .rz-dropdown-trigger,
        .register-radzen-control.rz-state-disabled .rz-datepicker-trigger {
            color: #a7aea0 !important;
        }

/* popup dropdown */
.rz-popup {
    border-radius: 16px !important;
    border: 1px solid #d9decd !important;
    box-shadow: 0 16px 40px rgba(34, 46, 38, 0.08) !important;
    overflow: hidden;
}

    .rz-popup .rz-dropdown-items {
        padding: 0.35rem;
        background: #ffffff;
    }

    .rz-popup .rz-dropdown-item {
        border-radius: 12px;
        font-size: 0.95rem;
        color: #2b342d;
    }

        .rz-popup .rz-dropdown-item:hover {
            background: #f3f7ea;
        }

        .rz-popup .rz-dropdown-item.rz-state-highlight {
            background: #e7f0d4 !important;
            color: #2f3a23 !important;
        }

/* calendario */
.rz-datepicker-calendar {
    border-radius: 16px !important;
    overflow: hidden;
}

.rz-datepicker table td a,
.rz-datepicker table td span {
    border-radius: 10px;
}

    .rz-datepicker table td a:hover {
        background: #f3f7ea !important;
    }

.rz-datepicker table td .rz-state-active {
    background: #93b255 !important;
    color: #ffffff !important;
}

.register-field .rz-dropdown,
.register-field .rz-datepicker {
    margin-top: 0;
}

/* ===== Botones del registro ===== */

.register-email-button,
.register-email-confirm-button,
.register-main-button,
.register-secondary-button {
    border-radius: 16px !important;
    min-height: 52px;
    font-weight: 700 !important;
    font-size: 0.95rem;
    padding: 0 1.15rem !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Botón verificar correo */
.register-email-button {
    min-width: 170px;
    background: #f4f7ec !important;
    color: #5d7240 !important;
    border: 1px solid #cfdbb5 !important;
}

    .register-email-button:hover,
    .register-email-button:focus {
        background: #eaf2da !important;
        color: #4d6135 !important;
        border-color: #b8cc88 !important;
    }

/* Botón confirmar código */
.register-email-confirm-button {
    min-width: 180px;
    background: linear-gradient(135deg, #9fbd58 0%, #89aa42 100%) !important;
    color: #ffffff !important;
    border: 1px solid #89aa42 !important;
}

    .register-email-confirm-button:hover,
    .register-email-confirm-button:focus {
        background: linear-gradient(135deg, #93b255 0%, #7f9d3d 100%) !important;
        border-color: #7f9d3d !important;
        transform: translateY(-1px);
    }

/* Botón principal registrar */
.register-main-button {
    min-width: 180px;
    max-width: 220px;
    background: linear-gradient(135deg, #9fbd58 0%, #89aa42 100%) !important;
    color: #ffffff !important;
    border: 1px solid #89aa42 !important;
}

    .register-main-button:hover,
    .register-main-button:focus {
        background: linear-gradient(135deg, #93b255 0%, #7f9d3d 100%) !important;
        border-color: #7f9d3d !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(137, 170, 66, 0.18) !important;
    }

/* Botón secundario volver */
.register-secondary-button {
    min-width: 180px;
    max-width: 220px;
    background: #ffffff !important;
    color: #5f6d58 !important;
    border: 1px solid #d7deca !important;
}

    .register-secondary-button:hover,
    .register-secondary-button:focus {
        background: #f8faf4 !important;
        color: #4b5845 !important;
        border-color: #bcc8aa !important;
    }

    /* Disabled */
    .register-email-button.rz-state-disabled,
    .register-email-confirm-button.rz-state-disabled,
    .register-main-button.rz-state-disabled,
    .register-secondary-button.rz-state-disabled,
    .register-email-button:disabled,
    .register-email-confirm-button:disabled,
    .register-main-button:disabled,
    .register-secondary-button:disabled {
        opacity: 1 !important;
        background: #eef1e7 !important;
        color: #a0aa95 !important;
        border-color: #dde3d2 !important;
        box-shadow: none !important;
        transform: none !important;
        cursor: not-allowed !important;
    }

    /* Centrar texto interno de Radzen */
    .register-email-button .rz-button-text,
    .register-email-confirm-button .rz-button-text,
    .register-main-button .rz-button-text,
    .register-secondary-button .rz-button-text {
        width: 100%;
        text-align: center;
        font-weight: 700 !important;
    }

/* Contenedor de acciones */
.register-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* Fila del correo */
.register-email-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.register-email-input {
    width: 100%;
}

/* Estados visuales correo */
.register-email-verified {
    margin-top: 0.55rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: #edf6df;
    border: 1px solid #cfe2a7;
    color: #58702b;
    font-size: 0.92rem;
    font-weight: 600;
}

.register-email-pending {
    margin-top: 0.55rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: #f7f8f2;
    border: 1px solid #d9decd;
    color: #68735e;
    font-size: 0.92rem;
}

/* Responsive */
@media (max-width: 768px) {
    .register-email-row {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .register-email-button,
    .register-email-confirm-button,
    .register-main-button,
    .register-secondary-button {
        width: 100%;
        min-width: 100%;
        max-width: 320px;
    }

    .register-actions {
        flex-direction: column;
        align-items: center;
    }
}

.register-button-loading {
    opacity: 0.9;
    pointer-events: none;
}

    .register-button-loading .rz-button-text {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px;
        width: 100%;
    }

        .register-button-loading .rz-button-text::after {
            content: "";
            width: 14px;
            height: 14px;
            border: 2px solid rgba(255, 255, 255, 0.45);
            border-top-color: rgba(255, 255, 255, 1);
            border-radius: 50%;
            animation: register-spin 0.8s linear infinite;
            flex: 0 0 14px;
        }

/* Spinner para botón claro */
.register-email-button.register-button-loading .rz-button-text::after {
    border: 2px solid rgba(93, 114, 64, 0.25);
    border-top-color: rgba(93, 114, 64, 1);
}

/* Spinner para botón secundario claro */
.register-secondary-button.register-button-loading .rz-button-text::after {
    border: 2px solid rgba(95, 109, 88, 0.25);
    border-top-color: rgba(95, 109, 88, 1);
}

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

/* ===== Foto de perfil - Register ===== */

.register-photo-upload-shell {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #d9decd;
    border-radius: 18px;
    background: #f8faf4;
}

.register-photo-preview-wrap {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    overflow: hidden;
    background: #eef2e6;
    border: 1px solid #d8e0c9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.register-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #7b8674;
    text-align: center;
    padding: 1rem;
}

.register-photo-placeholder-icon {
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.register-photo-placeholder-text {
    font-size: 0.9rem;
    line-height: 1.3;
}

.register-photo-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.register-photo-hidden-input {
    display: none;
}

.register-photo-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #9fbd58 0%, #89aa42 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid #89aa42;
    transition: all 0.2s ease;
    text-decoration: none;
}

    .register-photo-select-button:hover {
        background: linear-gradient(135deg, #93b255 0%, #7f9d3d 100%);
        transform: translateY(-1px);
    }

.register-photo-select-button-loading {
    opacity: 0.9;
    pointer-events: none;
    position: relative;
}

    .register-photo-select-button-loading::after {
        content: "";
        width: 14px;
        height: 14px;
        margin-left: 8px;
        border: 2px solid rgba(255,255,255,0.45);
        border-top-color: rgba(255,255,255,1);
        border-radius: 50%;
        animation: register-spin 0.8s linear infinite;
    }

.register-photo-file-name {
    font-size: 0.93rem;
    color: #445042;
    font-weight: 600;
    word-break: break-word;
}

.register-photo-help {
    font-size: 0.88rem;
    color: #7a8572;
}

.register-photo-error {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: #fff2f2;
    border: 1px solid #f1c3c3;
    color: #b54747;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .register-photo-upload-shell {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .register-photo-actions {
        align-items: center;
        width: 100%;
    }

    .register-photo-file-name,
    .register-photo-help,
    .register-photo-error {
        text-align: center;
    }
}

.register-password-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: #5f6d58;
    cursor: pointer;
}

    .register-password-toggle input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #93b255;
    }

/* =========================
   VARIABLES / LAYOUT GENERAL
   ========================= */

:root {
    --rz-primary: #7ea55a;
    --rz-primary-rgb: 126, 165, 90;
    --rz-secondary: #89a95d;
    --rz-info: #66c9ff;
    --rz-warning: #ffbf66;
    --rz-danger: #d96b6b;
    --rz-success: #7ea55a;
    --nav-bg: linear-gradient(135deg, #7ea55a 0%, #89a95d 45%, #6f9150 100%);
    --nav-bg-solid: #7ea55a;
    --nav-surface: rgba(255, 255, 255, 0.88);
    --nav-surface-soft: rgba(255, 255, 255, 0.68);
    --nav-border: rgba(151, 159, 141, 0.18);
    --nav-border-strong: rgba(126, 165, 90, 0.28);
    --nav-text: #2f372f;
    --nav-text-soft: #6f786c;
    --nav-text-inverse: #ffffff;
    --nav-hover: rgba(255, 255, 255, 0.16);
    --nav-active: rgba(255, 255, 255, 0.24);
    --nav-shadow: 0 18px 40px rgba(98, 88, 63, 0.12);
    --nav-shadow-soft: 0 10px 24px rgba(98, 88, 63, 0.08);
    --page-bg: radial-gradient(circle at top left, rgba(186, 209, 161, 0.22), transparent 26%), radial-gradient(circle at bottom right, rgba(230, 205, 160, 0.14), transparent 22%), linear-gradient(135deg, #f8f6f1 0%, #f3f0e8 48%, #eeeadf 100%);
    --header-h: 84px;
    --mmv-appbar-h: 70px;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--page-bg);
    color: var(--nav-text);
}

#app {
    min-height: 100vh;
}

.main-container {
    min-height: 100vh;
    padding-top: var(--header-h);
    background: var(--page-bg);
}

.no-print {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

@media (max-width: 1024px) {
    .main-container {
        padding-top: var(--mmv-appbar-h);
    }
}

/* Radzen global */
.rz-button.rz-primary {
    background: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

    .rz-button.rz-primary:hover {
        background: #6f9150 !important;
        border-color: #6f9150 !important;
    }

.rz-button.rz-light {
    border-radius: 16px !important;
}

.rz-dialog,
.rz-card,
.rz-panel {
    border-radius: 20px;
}

.rz-inputtext,
.rz-dropdown,
.rz-datepicker,
.rz-numeric {
    border-radius: 16px !important;
}

.rz-notification {
    border-radius: 18px !important;
}

.rz-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Input de búsqueda dentro del popup de Radzen */
.rz-dropdown-panel .rz-dropdown-filter,
.rz-multiselect-panel .rz-dropdown-filter {
    margin: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(137, 169, 93, 0.35) !important;
    background: #ffffff !important;
    min-height: 42px !important;
    box-shadow: 0 0 0 4px rgba(137, 169, 93, 0.08);
}

    .rz-dropdown-panel .rz-dropdown-filter input,
    .rz-multiselect-panel .rz-dropdown-filter input {
        font-size: 0.94rem !important;
        font-weight: 600;
        color: #2d342e !important;
    }

        .rz-dropdown-panel .rz-dropdown-filter input::placeholder,
        .rz-multiselect-panel .rz-dropdown-filter input::placeholder {
            color: #8f9789 !important;
        }

.article-input,
.article-textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(160, 160, 160, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    color: #2d342e;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 8px 18px rgba(45, 52, 46, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.article-input {
    min-height: 48px;
    padding: 12px 15px;
}

.article-textarea {
    min-height: 120px;
    padding: 14px 15px;
    resize: vertical;
    line-height: 1.6;
}

    .article-input::placeholder,
    .article-textarea::placeholder {
        color: rgba(85, 92, 83, 0.46);
        font-weight: 500;
    }

    .article-input:hover,
    .article-textarea:hover {
        border-color: rgba(218, 32, 33, 0.38);
        background: #ffffff;
    }

    .article-input:focus,
    .article-textarea:focus {
        border-color: #DA2021;
        box-shadow: 0 0 0 4px rgba(218, 32, 33, 0.12), 0 12px 26px rgba(45, 52, 46, 0.07);
        background: #ffffff;
        transform: translateY(-1px);
    }

    .article-input:disabled,
    .article-textarea:disabled {
        background: #f1f1f1;
        color: #8b8b8b;
        cursor: not-allowed;
    }

.article-form-field label {
    color: #30362f;
    font-size: 0.86rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.article-field-help {
    margin-top: 7px;
    color: #777f73;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 600;
}

.article-form-field .validation-message,
.article-form-field ::deep .validation-message {
    color: #DA2021;
    font-size: 0.82rem;
    margin-top: 6px;
    font-weight: 800;
}

.article-radzen-control {
    width: 100%;
}

    .article-radzen-control ::deep .rz-dropdown,
    .article-radzen-control ::deep .rz-multiselect,
    .article-radzen-control ::deep .rz-picker,
    .article-radzen-control ::deep .rz-inputtext {
        min-height: 48px;
        border-radius: 16px !important;
        border: 1px solid rgba(160, 160, 160, 0.28) !important;
        background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%) !important;
        box-shadow: 0 8px 18px rgba(45, 52, 46, 0.04);
        font-weight: 600;
    }

        .article-radzen-control ::deep .rz-dropdown:hover,
        .article-radzen-control ::deep .rz-multiselect:hover,
        .article-radzen-control ::deep .rz-picker:hover,
        .article-radzen-control ::deep .rz-inputtext:hover {
            border-color: rgba(218, 32, 33, 0.38) !important;
        }

        .article-radzen-control ::deep .rz-state-focused,
        .article-radzen-control ::deep .rz-dropdown:focus-within,
        .article-radzen-control ::deep .rz-multiselect:focus-within,
        .article-radzen-control ::deep .rz-picker:focus-within {
            border-color: #DA2021 !important;
            box-shadow: 0 0 0 4px rgba(218, 32, 33, 0.12), 0 12px 26px rgba(45, 52, 46, 0.07) !important;
        }

.article-category-dropdown ::deep .rz-chip {
    border-radius: 999px;
    background: rgba(218, 32, 33, 0.10) !important;
    color: #DA2021 !important;
    font-weight: 900;
    border: 1px solid rgba(218, 32, 33, 0.16);
}

.rz-inputtext {
    height: initial;
    padding: 0;
}

.rz-dropdown {
    padding: 8px;
}

/* =========================
   THEME OVERRIDE
   Gris / Negro / Blanco
   ========================= */

:root {
    --ds-primary: #1f2933;
    --ds-primary-dark: #111827;
    --ds-primary-soft: #f3f4f6;
    --ds-text: #1f2933;
    --ds-text-strong: #111827;
    --ds-text-muted: #6b7280;
    --ds-border: #d1d5db;
    --ds-surface: #ffffff;
    --rz-primary: #111827;
    --rz-primary-rgb: 17, 24, 39;
    --rz-secondary: #374151;
    --rz-success: #111827;
    --nav-bg: linear-gradient(135deg, #111827 0%, #1f2933 50%, #374151 100%);
    --nav-bg-solid: #111827;
    --nav-surface: rgba(255, 255, 255, 0.92);
    --nav-surface-soft: rgba(255, 255, 255, 0.76);
    --nav-border: rgba(17, 24, 39, 0.14);
    --nav-border-strong: rgba(17, 24, 39, 0.28);
    --nav-text: #111827;
    --nav-text-soft: #6b7280;
    --nav-text-inverse: #ffffff;
    --nav-hover: rgba(255, 255, 255, 0.14);
    --nav-active: rgba(255, 255, 255, 0.22);
    --page-bg: radial-gradient(circle at top left, rgba(17, 24, 39, 0.08), transparent 28%), radial-gradient(circle at bottom right, rgba(107, 114, 128, 0.12), transparent 24%), linear-gradient(135deg, #fafafa 0%, #f3f4f6 48%, #e5e7eb 100%);
}

/* Links */
.sport-link-small,
.sport-password-toggle {
    color: #111827 !important;
}

    .sport-link-small:hover {
        color: #374151 !important;
    }

/* Inputs */
.sport-input:focus,
.article-input:focus,
.article-textarea:focus {
    border-color: #111827 !important;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12) !important;
}

.sport-login-loading-dot {
    background: #111827 !important;
}

/* Botones principales Radzen */
.rz-button.rz-primary,
.rz-button.rz-button-md.rz-primary,
.rz-button.sport-login-button,
.register-main-button,
.register-email-confirm-button,
.register-photo-select-button {
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.18) !important;
}

    .rz-button.rz-primary:hover,
    .rz-button.rz-button-md.rz-primary:hover,
    .rz-button.sport-login-button:hover,
    .register-main-button:hover,
    .register-email-confirm-button:hover,
    .register-photo-select-button:hover {
        background: linear-gradient(135deg, #000000 0%, #1f2933 100%) !important;
        border-color: #000000 !important;
    }

/* Botones secundarios */
.rz-button.sport-register-button,
.register-email-button,
.register-secondary-button {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

    .rz-button.sport-register-button:hover,
    .register-email-button:hover,
    .register-secondary-button:hover {
        background: #f3f4f6 !important;
        color: #000000 !important;
        border-color: #9ca3af !important;
    }

    /* Disabled */
    .register-email-button.rz-state-disabled,
    .register-email-confirm-button.rz-state-disabled,
    .register-main-button.rz-state-disabled,
    .register-secondary-button.rz-state-disabled,
    .register-email-button:disabled,
    .register-email-confirm-button:disabled,
    .register-main-button:disabled,
    .register-secondary-button:disabled {
        background: #e5e7eb !important;
        color: #9ca3af !important;
        border-color: #d1d5db !important;
    }

/* Register Radzen controls */
.register-radzen-control.rz-dropdown,
.register-radzen-control.rz-datepicker {
    border-color: #d1d5db !important;
    background: #ffffff !important;
}

    .register-radzen-control.rz-dropdown:hover,
    .register-radzen-control.rz-datepicker:hover {
        border-color: #6b7280 !important;
    }

    .register-radzen-control.rz-state-focus,
    .register-radzen-control.rz-dropdown.rz-state-focus,
    .register-radzen-control.rz-datepicker.rz-state-focus {
        border-color: #111827 !important;
        box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12) !important;
    }

.register-radzen-control .rz-dropdown-trigger,
.register-radzen-control .rz-datepicker-trigger {
    color: #374151 !important;
}

.register-radzen-control.rz-state-disabled {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
}

/* Dropdown popup */
.rz-popup {
    border-color: #d1d5db !important;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.10) !important;
}

    .rz-popup .rz-dropdown-item:hover {
        background: #f3f4f6 !important;
    }

    .rz-popup .rz-dropdown-item.rz-state-highlight {
        background: #111827 !important;
        color: #ffffff !important;
    }

/* Calendario */
.rz-datepicker table td a:hover {
    background: #f3f4f6 !important;
}

.rz-datepicker table td .rz-state-active {
    background: #111827 !important;
    color: #ffffff !important;
}

/* Estados correo */
.register-email-verified {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.register-email-pending {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

/* Foto */
.register-photo-upload-shell {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
}

.register-photo-preview-wrap {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

.register-photo-placeholder {
    color: #6b7280 !important;
}

.register-photo-file-name {
    color: #111827 !important;
}

.register-photo-help {
    color: #6b7280 !important;
}

/* Checks */
.register-password-toggle {
    color: #374151 !important;
}

    .register-password-toggle input[type="checkbox"] {
        accent-color: #111827 !important;
    }

/* Filtros Radzen */
.rz-dropdown-panel .rz-dropdown-filter,
.rz-multiselect-panel .rz-dropdown-filter {
    border-color: rgba(17, 24, 39, 0.28) !important;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08) !important;
}

/* Chips / badges */
.sport-label-helper,
.sport-search-dropdown ::deep .rz-chip,
.article-category-dropdown ::deep .rz-chip {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* Register page fondos */
.register-page {
    background: radial-gradient(circle at top left, rgba(17, 24, 39, 0.08), transparent 24%), radial-gradient(circle at bottom right, rgba(107, 114, 128, 0.12), transparent 20%), linear-gradient(135deg, #fafafa 0%, #f3f4f6 48%, #e5e7eb 100%) !important;
}

.register-glow-1,
.register-glow-2 {
    background: rgba(17, 24, 39, 0.08) !important;
}

.register-side-badge,
.register-form-badge {
    color: #111827 !important;
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}

.register-side-title,
.register-form-header h2 {
    color: #111827 !important;
}

    .register-side-title span {
        color: #374151 !important;
    }

.register-back-link {
    color: #111827 !important;
}

.register-warning,
.register-other-sport-box {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

/* Dashboard / reportes */
.reports-badge {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

.reports-btn-excel,
.reports-btn-pdf {
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

    .reports-btn-excel:hover,
    .reports-btn-pdf:hover {
        background: linear-gradient(135deg, #000000 0%, #1f2933 100%) !important;
    }

/* Artículos si los quieres neutralizar también */
.article-input:hover,
.article-textarea:hover {
    border-color: rgba(17, 24, 39, 0.35) !important;
}

.article-input:focus,
.article-textarea:focus {
    border-color: #111827 !important;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12), 0 12px 26px rgba(17, 24, 39, 0.07) !important;
}

.article-form-field .validation-message,
.article-form-field ::deep .validation-message {
    color: #111827 !important;
}

.article-radzen-control ::deep .rz-dropdown:hover,
.article-radzen-control ::deep .rz-multiselect:hover,
.article-radzen-control ::deep .rz-picker:hover,
.article-radzen-control ::deep .rz-inputtext:hover {
    border-color: rgba(17, 24, 39, 0.35) !important;
}

.article-radzen-control ::deep .rz-state-focused,
.article-radzen-control ::deep .rz-dropdown:focus-within,
.article-radzen-control ::deep .rz-multiselect:focus-within,
.article-radzen-control ::deep .rz-picker:focus-within {
    border-color: #111827 !important;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12), 0 12px 26px rgba(17, 24, 39, 0.07) !important;
}

/* BOTÓN PRINCIPAL */
.rz-button.event-create-primary-btn {
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.20) !important;
}

    .rz-button.event-create-primary-btn:hover {
        background: linear-gradient(135deg, #000000 0%, #1f2933 100%) !important;
        border-color: #000000 !important;
    }

/* BOTÓN SECUNDARIO */
.rz-button.event-create-secondary-btn {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

    .rz-button.event-create-secondary-btn:hover {
        background: #f3f4f6 !important;
        border-color: #9ca3af !important;
    }

/* BOTONES PRINCIPALES */
.rz-button.article-form-main-btn,
.rz-button.article-form-primary-btn {
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}

    .rz-button.article-form-main-btn:hover,
    .rz-button.article-form-primary-btn:hover {
        background: linear-gradient(135deg, #000000 0%, #1f2933 100%) !important;
    }

/* BOTONES SECUNDARIOS */
.rz-button.article-form-secondary-btn,
.rz-button.article-form-cancel-btn {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

    .rz-button.article-form-secondary-btn:hover,
    .rz-button.article-form-cancel-btn:hover {
        background: #f3f4f6 !important;
    }

/* DELETE */
.rz-button.article-form-delete-btn {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
}

/* Iconos perfil */
::deep .profile-stat-icon-blue .rz-icon {
    color: #2563eb !important;
}

::deep .profile-stat-icon-green .rz-icon {
    color: #16a34a !important;
}

::deep .profile-stat-icon-orange .rz-icon {
    color: #fb923c !important;
}

::deep .profile-stat-icon-purple .rz-icon {
    color: #7c6cc7 !important;
}

/* =========================================================
   PROFILE SIDEBAR - Radzen Dropdown fix
   ========================================================= */

.profile-sidebar-backdrop {
    z-index: 99998 !important;
}

.profile-edit-sidebar {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

    /* Dropdown específico del sidebar de perfil */
    .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
    }

        .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown:hover,
        .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown.rz-state-focused,
        .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown:focus-within {
            border: 0 !important;
            box-shadow: none !important;
            outline: none !important;
            background: #ffffff !important;
        }

    /* Texto del dropdown */
    .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-label {
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 34px 0 14px !important;
        color: #344054 !important;
        font-size: 0.76rem !important;
        font-weight: 400 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        display: block !important;
    }

        .profile-edit-sidebar .profile-sidebar-dropdown .rz-placeholder,
        .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-label.rz-inputtext-placeholder {
            color: #9ca3af !important;
        }

    /* Flecha del dropdown */
    .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger {
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #667085 !important;
        box-shadow: none !important;
    }

        .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger .rz-icon,
        .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger .rzi {
            font-size: 18px !important;
            color: #667085 !important;
        }

/* Popup por encima del sidebar */
.rz-popup,
.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel {
    z-index: 100010 !important;
}

/* Popup limpio */
.rz-dropdown-panel {
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
    overflow: hidden !important;
}

    /* Lista del popup */
    .rz-dropdown-panel .rz-dropdown-items,
    .rz-popup .rz-dropdown-items {
        padding: 4px !important;
        background: #ffffff !important;
    }

    /* Items del popup */
    .rz-dropdown-panel .rz-dropdown-item,
    .rz-popup .rz-dropdown-item {
        min-height: 34px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        color: #344054 !important;
        font-size: 0.76rem !important;
        font-weight: 500 !important;
    }

        .rz-dropdown-panel .rz-dropdown-item:hover,
        .rz-popup .rz-dropdown-item:hover {
            background: #f3f4f6 !important;
            color: #111827 !important;
        }

        .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
        .rz-popup .rz-dropdown-item.rz-state-highlight {
            background: #111827 !important;
            color: #ffffff !important;
        }

    /* El filtro global se mantiene bonito para otros dropdowns.
   Para Género cambia AllowFiltering="false" en el Razor. */
    .rz-dropdown-panel .rz-dropdown-filter,
    .rz-multiselect-panel .rz-dropdown-filter {
        margin: 8px 10px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        border: 1px solid #d1d5db !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

        .rz-dropdown-panel .rz-dropdown-filter input,
        .rz-multiselect-panel .rz-dropdown-filter input {
            min-height: 34px !important;
            height: 34px !important;
            padding: 0 10px !important;
            font-size: 0.8rem !important;
            font-weight: 500 !important;
            color: #111827 !important;
        }


/* =========================================================
   THEME OVERRIDE FINAL - Deporte Seguro
   Paleta oficial:
   Main: #0F172A
   Secondary: #243044
   Details: #1F2937
   LighterDetails: #2B3648
   Light: #F8FAFC
   ========================================================= */

:root {
    --ds-primary: #243044;
    --ds-primary-dark: #0F172A;
    --ds-primary-soft: #F8FAFC;
    --ds-text: #1F2937;
    --ds-text-strong: #0F172A;
    --ds-text-muted: #64748B;
    --ds-border: #D8DEE8;
    --ds-surface: #F8FAFC;
    --rz-primary: #243044;
    --rz-primary-rgb: 36, 48, 68;
    --rz-secondary: #1F2937;
    --rz-success: #243044;
    --nav-bg: linear-gradient(135deg, #0F172A 0%, #1F2937 52%, #243044 100%);
    --nav-bg-solid: #0F172A;
    --nav-surface: rgba(248, 250, 252, 0.94);
    --nav-surface-soft: rgba(248, 250, 252, 0.78);
    --nav-border: rgba(248, 250, 252, 0.12);
    --nav-border-strong: rgba(248, 250, 252, 0.22);
    --nav-text: #0F172A;
    --nav-text-soft: #64748B;
    --nav-text-inverse: #F8FAFC;
    --nav-hover: rgba(248, 250, 252, 0.12);
    --nav-active: rgba(248, 250, 252, 0.20);
    --page-bg: radial-gradient(circle at top left, rgba(36, 48, 68, 0.10), transparent 28%), radial-gradient(circle at bottom right, rgba(43, 54, 72, 0.14), transparent 24%), linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 48%, #D8DEE8 100%);
}

/* Links */
.sport-link-small,
.sport-password-toggle {
    color: #243044 !important;
}

    .sport-link-small:hover,
    .sport-password-toggle:hover {
        color: #0F172A !important;
    }

/* Inputs globales */
.sport-input {
    color: #0F172A !important;
    border-color: #D8DEE8 !important;
}

    .sport-input:focus,
    .article-input:focus,
    .article-textarea:focus {
        border-color: #243044 !important;
        box-shadow: 0 0 0 4px rgba(36, 48, 68, 0.14) !important;
    }

/* Botones principales */
.rz-button.rz-primary,
.rz-button.rz-button-md.rz-primary,
.rz-button.sport-login-button,
.register-main-button,
.register-email-confirm-button,
.register-photo-select-button,
.rz-button.event-create-primary-btn,
.rz-button.article-form-main-btn,
.rz-button.article-form-primary-btn,
.reports-btn-excel,
.reports-btn-pdf {
    background: linear-gradient(135deg, #243044 0%, #0F172A 100%) !important;
    border-color: #243044 !important;
    color: #F8FAFC !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18) !important;
}

    .rz-button.rz-primary:hover,
    .rz-button.rz-button-md.rz-primary:hover,
    .rz-button.sport-login-button:hover,
    .register-main-button:hover,
    .register-email-confirm-button:hover,
    .register-photo-select-button:hover,
    .rz-button.event-create-primary-btn:hover,
    .rz-button.article-form-main-btn:hover,
    .rz-button.article-form-primary-btn:hover,
    .reports-btn-excel:hover,
    .reports-btn-pdf:hover {
        background: linear-gradient(135deg, #0F172A 0%, #1F2937 100%) !important;
        border-color: #0F172A !important;
    }

/* Botones secundarios */
.rz-button.sport-register-button,
.register-email-button,
.register-secondary-button,
.rz-button.event-create-secondary-btn,
.rz-button.article-form-secondary-btn,
.rz-button.article-form-cancel-btn {
    background: #F8FAFC !important;
    color: #0F172A !important;
    border: 1px solid #D8DEE8 !important;
    box-shadow: none !important;
}

    .rz-button.sport-register-button:hover,
    .register-email-button:hover,
    .register-secondary-button:hover,
    .rz-button.event-create-secondary-btn:hover,
    .rz-button.article-form-secondary-btn:hover,
    .rz-button.article-form-cancel-btn:hover {
        background: #EEF2F7 !important;
        color: #0F172A !important;
        border-color: #B8C2D1 !important;
    }

    /* Disabled */
    .register-email-button.rz-state-disabled,
    .register-email-confirm-button.rz-state-disabled,
    .register-main-button.rz-state-disabled,
    .register-secondary-button.rz-state-disabled,
    .register-email-button:disabled,
    .register-email-confirm-button:disabled,
    .register-main-button:disabled,
    .register-secondary-button:disabled {
        background: #E5EAF1 !important;
        color: #94A3B8 !important;
        border-color: #D8DEE8 !important;
        box-shadow: none !important;
    }

/* Radzen controls */
.register-radzen-control.rz-dropdown,
.register-radzen-control.rz-datepicker {
    border-color: #D8DEE8 !important;
    background: #FFFFFF !important;
}

    .register-radzen-control.rz-dropdown:hover,
    .register-radzen-control.rz-datepicker:hover {
        border-color: #243044 !important;
    }

    .register-radzen-control.rz-state-focus,
    .register-radzen-control.rz-dropdown.rz-state-focus,
    .register-radzen-control.rz-datepicker.rz-state-focus {
        border-color: #243044 !important;
        box-shadow: 0 0 0 4px rgba(36, 48, 68, 0.14) !important;
    }

.register-radzen-control .rz-dropdown-trigger,
.register-radzen-control .rz-datepicker-trigger {
    color: #243044 !important;
}

/* Dropdown popup */
.rz-popup {
    border-color: #D8DEE8 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
}

    .rz-popup .rz-dropdown-item:hover {
        background: #EEF2F7 !important;
    }

    .rz-popup .rz-dropdown-item.rz-state-highlight,
    .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
        background: #243044 !important;
        color: #F8FAFC !important;
    }

/* Calendario */
.rz-datepicker table td a:hover {
    background: #EEF2F7 !important;
}

.rz-datepicker table td .rz-state-active {
    background: #243044 !important;
    color: #F8FAFC !important;
}

/* Register page */
.register-page {
    background: radial-gradient(circle at top left, rgba(36, 48, 68, 0.10), transparent 24%), radial-gradient(circle at bottom right, rgba(43, 54, 72, 0.14), transparent 20%), linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 48%, #D8DEE8 100%) !important;
}

.register-glow-1,
.register-glow-2 {
    background: rgba(36, 48, 68, 0.10) !important;
}

.register-side-badge,
.register-form-badge,
.reports-badge,
.sport-label-helper,
.sport-search-dropdown ::deep .rz-chip,
.article-category-dropdown ::deep .rz-chip {
    color: #0F172A !important;
    background: #EEF2F7 !important;
    border-color: #D8DEE8 !important;
}

.register-side-title,
.register-form-header h2 {
    color: #0F172A !important;
}

    .register-side-title span,
    .register-back-link {
        color: #243044 !important;
    }

/* Article inputs */
.article-input:hover,
.article-textarea:hover {
    border-color: rgba(36, 48, 68, 0.35) !important;
}

.article-input:focus,
.article-textarea:focus {
    border-color: #243044 !important;
    box-shadow: 0 0 0 4px rgba(36, 48, 68, 0.14), 0 12px 26px rgba(15, 23, 42, 0.07) !important;
}

.article-form-field .validation-message,
.article-form-field ::deep .validation-message {
    color: #0F172A !important;
}

.article-radzen-control ::deep .rz-dropdown:hover,
.article-radzen-control ::deep .rz-multiselect:hover,
.article-radzen-control ::deep .rz-picker:hover,
.article-radzen-control ::deep .rz-inputtext:hover {
    border-color: rgba(36, 48, 68, 0.35) !important;
}

.article-radzen-control ::deep .rz-state-focused,
.article-radzen-control ::deep .rz-dropdown:focus-within,
.article-radzen-control ::deep .rz-multiselect:focus-within,
.article-radzen-control ::deep .rz-picker:focus-within {
    border-color: #243044 !important;
    box-shadow: 0 0 0 4px rgba(36, 48, 68, 0.14), 0 12px 26px rgba(15, 23, 42, 0.07) !important;
}

/* Delete */
.rz-button.article-form-delete-btn {
    background: #0F172A !important;
    color: #F8FAFC !important;
    border-color: #0F172A !important;
}

/* =========================================================
   REGISTER - CSS FINAL LIMPIO
   Escala:
   - Títulos grandes: 24px
   - Títulos 2: 22px
   - Subtítulos / labels: 20px
   - Texto normal: 16px
   - Botones: 16px
   ========================================================= */

.register-page {
    --register-title-lg: 24px;
    --register-title-2: 22px;
    --register-subtitle: 20px;
    --register-body: 16px;
    --register-button: 16px;
    --register-main: #0F172A;
    --register-secondary: #243044;
    --register-details: #1F2937;
    --register-light: #F8FAFC;
    --register-border: #D8DEE8;
    --register-muted: #94A3B8;
    --register-muted-bg: #E5EAF1;
    background: radial-gradient(circle at top left, rgba(36, 48, 68, 0.10), transparent 24%), radial-gradient(circle at bottom right, rgba(43, 54, 72, 0.14), transparent 20%), linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 48%, #D8DEE8 100%) !important;
}

    /* =========================
   REGISTER - TIPOGRAFÍA BASE
   ========================= */

    .register-page,
    .register-page p,
    .register-page span,
    .register-page input,
    .register-page textarea,
    .register-page select,
    .register-page label,
    .register-page button,
    .register-page .rz-button,
    .register-page .rz-inputtext,
    .register-page .rz-dropdown-label,
    .register-page .rz-multiselect-label,
    .register-page .rz-placeholder {
        font-size: var(--register-body) !important;
    }

        .register-page .register-form-header,
        .register-page .register-form-header h1,
        .register-page .register-form-header h2,
        .register-page .register-form-header p {
            border: 0 !important;
            outline: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }

            .register-page .register-form-header h1,
            .register-page.register-step-1 .register-form-header h1,
            .register-page.register-step-2 .register-form-header h1,
            .register-page.register-step-3 .register-form-header h1 {
                margin: 0 0 6px 0 !important;
                padding: 0 !important;
                color: var(--register-main) !important;
                font-size: var(--register-title-lg) !important;
                line-height: 1.15 !important;
                font-weight: 900 !important;
                letter-spacing: -0.02em !important;
            }

                .register-page .register-form-header h1 span,
                .register-page.register-step-1 .register-form-header h1 span,
                .register-page.register-step-2 .register-form-header h1 span,
                .register-page.register-step-3 .register-form-header h1 span {
                    color: rgba(15, 23, 42, 0.18) !important;
                    font-size: var(--register-title-2) !important;
                    line-height: 1.15 !important;
                    font-weight: 900 !important;
                    letter-spacing: -0.02em !important;
                }

            .register-page .register-form-header h2,
            .register-page.register-step-1 .register-form-header h2,
            .register-page.register-step-2 .register-form-header h2,
            .register-page.register-step-3 .register-form-header h2 {
                margin: 0 0 6px 0 !important;
                padding: 0 !important;
                color: var(--register-main) !important;
                font-size: var(--register-title-2) !important;
                line-height: 1.2 !important;
                font-weight: 800 !important;
            }

            .register-page .register-form-header p,
            .register-page.register-step-1 .register-form-header p,
            .register-page.register-step-2 .register-form-header p,
            .register-page.register-step-3 .register-form-header p {
                margin: 0 !important;
                padding: 0 !important;
                color: var(--register-details) !important;
                font-size: var(--register-body) !important;
                line-height: 1.4 !important;
                font-weight: 400 !important;
            }

        .register-page .sport-label,
        .register-page.register-step-1 .sport-label,
        .register-page.register-step-2 .sport-label,
        .register-page.register-step-3 .sport-label,
        .register-page .register-field > label,
        .register-page .register-field-full > label,
        .register-page .register-other-sport-box label {
            display: block !important;
            margin: 0 0 8px 0 !important;
            color: var(--register-main) !important;
            font-size: var(--register-subtitle) !important;
            line-height: 1.25 !important;
            font-weight: 600 !important;
        }

            .register-page .sport-label span,
            .register-page .register-field > label span,
            .register-page .register-field-full > label span {
                color: var(--register-muted) !important;
                font-size: var(--register-body) !important;
                line-height: 1.35 !important;
                font-weight: 400 !important;
            }

        .register-page .register-email-verified,
        .register-page .register-email-pending,
        .register-page .sport-dropdown-help,
        .register-page .register-photo-file-name,
        .register-page .register-photo-error,
        .register-page .register-otp-error,
        .register-page .validation-message,
        .register-page .register-field .validation-message,
        .register-page .register-field .field-validation-error,
        .register-page .sport-login-alert,
        .register-page .register-success-alert,
        .register-page .sport-login-loading,
        .register-page .register-other-sport-box,
        .register-page .register-other-sport-box input {
            font-size: var(--register-body) !important;
            line-height: 1.4 !important;
        }

        /* =========================
   REGISTER - LAYOUT
   ========================= */

        .register-page.register-step-2 .register-shell {
            padding-left: 86px !important;
            padding-right: 28px !important;
        }

        .register-page.register-step-2 .register-form-card {
            max-width: 620px !important;
        }

        .register-page.register-step-2 .register-progress {
            margin-bottom: 18px !important;
        }

        .register-page.register-step-2 .register-form-header {
            margin-bottom: 18px !important;
        }

        .register-page.register-step-2 .register-step-content-wide {
            gap: 16px !important;
        }

        .register-page.register-step-2 .register-step-two-top {
            display: grid !important;
            grid-template-columns: 180px minmax(0, 1fr) !important;
            gap: 18px !important;
            align-items: stretch !important;
        }

            .register-page.register-step-2 .register-step-two-top .register-grid-two {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
            }

        .register-page.register-step-2 .register-grid-two {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 14px 18px !important;
        }

        .register-page.register-step-2 .register-separator {
            width: 100% !important;
            height: 1px !important;
            margin: 4px 0 6px 0 !important;
            background: #9CA3AF !important;
            opacity: 0.75 !important;
        }

        /* =========================
   REGISTER - INPUTS
   ========================= */

        .register-page .sport-input,
        .register-page input.sport-input,
        .register-page .register-field .sport-input,
        .register-page .register-otp-input {
            width: 100% !important;
            height: 46px !important;
            min-height: 46px !important;
            max-height: 46px !important;
            padding: 0 14px !important;
            border-radius: 8px !important;
            border: 1px solid var(--register-border) !important;
            background: #FFFFFF !important;
            color: var(--register-main) !important;
            font-size: var(--register-body) !important;
            font-weight: 400 !important;
            line-height: 46px !important;
            box-shadow: none !important;
            outline: none !important;
        }

            .register-page .sport-input::placeholder,
            .register-page input.sport-input::placeholder,
            .register-page .register-otp-input::placeholder {
                color: #9CA3AF !important;
                font-size: var(--register-body) !important;
                font-weight: 400 !important;
            }

            .register-page .sport-input:focus,
            .register-page input.sport-input:focus,
            .register-page .register-otp-input:focus {
                border-color: var(--register-secondary) !important;
                box-shadow: 0 0 0 3px rgba(36, 48, 68, 0.10) !important;
            }

        /* =========================
   REGISTER - RADZEN
   ========================= */

        .register-page .register-radzen-control,
        .register-page .register-radzen-control.rz-dropdown,
        .register-page .register-radzen-control.rz-multiselect,
        .register-page .register-radzen-control.rz-datepicker,
        .register-page .register-radzen-control .rz-dropdown,
        .register-page .register-radzen-control .rz-multiselect,
        .register-page .register-radzen-control .rz-picker,
        .register-page .register-radzen-control .rz-inputtext {
            width: 100% !important;
            height: 46px !important;
            min-height: 46px !important;
            max-height: none !important;
            padding: 0 !important;
            border-radius: 8px !important;
            border: 1px solid var(--register-border) !important;
            background: #FFFFFF !important;
            color: var(--register-main) !important;
            box-shadow: none !important;
            font-size: var(--register-body) !important;
        }

            .register-page .register-radzen-control.rz-dropdown:hover,
            .register-page .register-radzen-control.rz-multiselect:hover,
            .register-page .register-radzen-control.rz-datepicker:hover,
            .register-page .register-radzen-control.rz-state-focus,
            .register-page .register-radzen-control.rz-dropdown.rz-state-focus,
            .register-page .register-radzen-control.rz-multiselect.rz-state-focus,
            .register-page .register-radzen-control.rz-datepicker.rz-state-focus,
            .register-page .register-radzen-control:focus-within {
                border-color: var(--register-secondary) !important;
                box-shadow: 0 0 0 3px rgba(36, 48, 68, 0.10) !important;
            }

            .register-page .register-radzen-control .rz-dropdown-label,
            .register-page .register-radzen-control .rz-multiselect-label,
            .register-page .register-radzen-control .rz-placeholder,
            .register-page .register-radzen-control input,
            .register-page .register-radzen-control .rz-inputtext {
                height: 46px !important;
                min-height: 46px !important;
                line-height: 46px !important;
                padding: 0 14px !important;
                color: #9CA3AF !important;
                background: transparent !important;
                border: 0 !important;
                box-shadow: none !important;
                font-size: var(--register-body) !important;
                font-weight: 400 !important;
            }

            .register-page .register-radzen-control .rz-dropdown-trigger,
            .register-page .register-radzen-control .rz-multiselect-trigger,
            .register-page .register-radzen-control .rz-datepicker-trigger {
                width: 38px !important;
                height: 46px !important;
                min-height: 46px !important;
                padding: 0 !important;
                border: 0 !important;
                background: transparent !important;
                color: var(--register-main) !important;
            }

                .register-page .register-radzen-control .rz-dropdown-trigger .rz-icon,
                .register-page .register-radzen-control .rz-dropdown-trigger .rzi,
                .register-page .register-radzen-control .rz-multiselect-trigger .rz-icon,
                .register-page .register-radzen-control .rz-multiselect-trigger .rzi,
                .register-page .register-radzen-control .rz-datepicker-trigger .rz-icon,
                .register-page .register-radzen-control .rz-datepicker-trigger .rzi {
                    color: var(--register-main) !important;
                    font-size: var(--register-body) !important;
                }

            .register-page .register-radzen-control .rz-chip,
            .register-page .sport-search-dropdown .rz-chip {
                min-height: 30px !important;
                padding: 0 10px !important;
                border-radius: 999px !important;
                background: #EEF2F7 !important;
                color: var(--register-main) !important;
                border: 1px solid var(--register-border) !important;
                font-size: var(--register-body) !important;
                font-weight: 700 !important;
            }

        /* =========================
   REGISTER - FOTO
   ========================= */

        .register-page.register-step-2 .register-photo-upload-shell {
            width: 180px !important;
            min-width: 180px !important;
            max-width: 180px !important;
            height: 170px !important;
          
            padding: 14px 12px !important;
            border-radius: 10px !important;
            border: 1px solid var(--register-border) !important;
            background: #F3F4F6 !important;
            box-shadow: none !important;
            display: flex !important;
            grid-template-columns: initial !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            text-align: center !important;
            overflow: hidden !important;
        }

        .register-page.register-step-2 .register-photo-preview-wrap {
            width: 100% !important;
            height: 52px !important;
            min-height: 52px !important;
            max-height: 52px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            overflow: visible !important;
        }

        .register-page.register-step-2 .register-photo-preview {
            width: 52px !important;
            height: 52px !important;
            border-radius: 999px !important;
            object-fit: cover !important;
        }

        .register-page.register-step-2 .register-photo-placeholder {
            padding: 0 !important;
            margin: 0 !important;
            color: #C4C4C4 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
        }

        .register-page.register-step-2 .register-photo-placeholder-icon {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
            color: #C9C9C9 !important;
        }

            .register-page.register-step-2 .register-photo-placeholder-icon .rz-icon,
            .register-page.register-step-2 .register-photo-placeholder-icon .rzi {
                font-size: 22px !important;
                color: #C9C9C9 !important;
            }

        .register-page .register-photo-placeholder-text,
        .register-page .register-photo-placeholder-text small,
        .register-page.register-step-2 .register-photo-placeholder-text,
        .register-page.register-step-2 .register-photo-placeholder-text small {
            color: #C4C4C4 !important;
            font-size: 12px !important;
            line-height: 1.2 !important;
            font-weight: 400 !important;
            text-align: center !important;
        }

        .register-page.register-step-2 .register-photo-file-name,
        .register-page.register-step-2 .register-photo-error {
            max-width: 150px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            background: transparent !important;
            font-size: var(--register-body) !important;
            line-height: 1.2 !important;
            text-align: center !important;
            word-break: break-word !important;
        }

        .register-page.register-step-2 .register-photo-file-name {
            color: #64748B !important;
            font-weight: 600 !important;
        }

        .register-page.register-step-2 .register-photo-error {
            color: #B91C1C !important;
            font-weight: 700 !important;
        }

        /* =========================
   REGISTER - BOTONES
   ========================= */

        .register-page .register-actions {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 18px !important;
            margin-top: 12px !important;
            align-items: center !important;
            justify-content: initial !important;
            flex-wrap: initial !important;
        }

            .register-page .register-actions > button,
            .register-page .register-actions > .rz-button,
            .register-page .register-actions .register-btn,
            .register-page .register-actions .rz-button,
            .register-page .register-actions .rz-button.register-final-button,
            .register-page .register-email-button,
            .register-page .rz-button.register-email-button,
            .register-page .register-email-confirm-button,
            .register-page .rz-button.register-email-confirm-button,
            .register-page .register-photo-select-button,
            .register-page .register-otp-button,
            .register-page .register-password-toggle-button {
                height: 46px !important;
                min-height: 46px !important;
                max-height: 46px !important;
                padding: 0 14px !important;
                margin: 0 !important;
                border-radius: 8px !important;
                border: 0 !important;
                box-shadow: none !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
                text-align: center !important;
                line-height: 1 !important;
                font-size: var(--register-button) !important;
                font-weight: 900 !important;
                letter-spacing: 0.02em !important;
                text-transform: none !important;
                transform: none !important;
            }

                .register-page .register-actions > button,
                .register-page .register-actions > .rz-button,
                .register-page .register-actions .register-btn,
                .register-page .register-actions .rz-button.register-final-button {
                    width: 100% !important;
                    min-width: 0 !important;
                    max-width: none !important;
                }

                    .register-page .register-actions .register-btn span,
                    .register-page .register-actions .rz-button .rz-button-text,
                    .register-page .register-actions .rz-button .rz-button-box,
                    .register-page .register-actions .register-final-button .rz-button-text,
                    .register-page .register-actions .register-final-button .rz-button-box,
                    .register-page .register-email-button .rz-button-text,
                    .register-page .rz-button.register-email-button .rz-button-text,
                    .register-page .register-email-confirm-button .rz-button-text,
                    .register-page .rz-button.register-email-confirm-button .rz-button-text {
                        width: auto !important;
                        min-height: 0 !important;
                        height: auto !important;
                        padding: 0 !important;
                        margin: 0 !important;
                        display: inline-flex !important;
                        align-items: center !important;
                        justify-content: center !important;
                        line-height: 1 !important;
                        text-align: center !important;
                        font-size: var(--register-button) !important;
                        font-weight: 900 !important;
                    }

        .register-page .register-btn-muted {
            background: #C8C8C8 !important;
            color: #FFFFFF !important;
        }

            .register-page .register-btn-muted:hover {
                background: #BDBDBD !important;
                transform: none !important;
            }

        .register-page .register-btn-primary,
        .register-page .rz-button.register-final-button,
        .register-page .register-email-button,
        .register-page .rz-button.register-email-button,
        .register-page .register-email-confirm-button,
        .register-page .rz-button.register-email-confirm-button,
        .register-page .register-photo-select-button,
        .register-page .register-otp-button {
            background: var(--register-secondary) !important;
            border-color: var(--register-secondary) !important;
            color: var(--register-light) !important;
        }

            .register-page .register-btn-primary:hover:not(:disabled),
            .register-page .rz-button.register-final-button:hover:not(:disabled),
            .register-page .register-email-button:hover:not(:disabled),
            .register-page .rz-button.register-email-button:hover:not(:disabled),
            .register-page .register-email-confirm-button:hover:not(:disabled),
            .register-page .rz-button.register-email-confirm-button:hover:not(:disabled),
            .register-page .register-photo-select-button:hover,
            .register-page .register-otp-button:hover:not(:disabled) {
                background: var(--register-main) !important;
                border-color: var(--register-main) !important;
                color: var(--register-light) !important;
                transform: none !important;
            }

        .register-page .register-email-row {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) 128px !important;
            gap: 10px !important;
            align-items: start !important;
            width: 100% !important;
        }

        .register-page .register-email-input,
        .register-page .register-input-icon-wrap {
            min-width: 0 !important;
            width: 100% !important;
        }

        .register-page .register-email-button,
        .register-page .rz-button.register-email-button,
        .register-page .register-email-confirm-button,
        .register-page .rz-button.register-email-confirm-button,
        .register-page .register-photo-select-button,
        .register-page.register-step-2 .register-photo-select-button {
            width: 128px !important;
            min-width: 128px !important;
            max-width: 128px !important;
        }

            .register-page button:disabled,
            .register-page .rz-button.rz-state-disabled,
            .register-page .register-email-button.rz-state-disabled,
            .register-page .register-email-button:disabled,
            .register-page .register-email-confirm-button.rz-state-disabled,
            .register-page .register-email-confirm-button:disabled,
            .register-page .register-otp-button:disabled {
                background: var(--register-muted-bg) !important;
                color: var(--register-muted) !important;
                border-color: var(--register-border) !important;
                opacity: 1 !important;
                cursor: not-allowed !important;
                box-shadow: none !important;
                transform: none !important;
            }

/* =========================
   REGISTER - POPUPS
   ========================= */

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-popup {
    border-radius: 10px !important;
    border: 1px solid #D8DEE8 !important;
    background: #FFFFFF !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden !important;
    z-index: 100010 !important;
}

    .rz-dropdown-panel .rz-dropdown-items,
    .rz-multiselect-panel .rz-dropdown-items,
    .rz-popup .rz-dropdown-items {
        padding: 6px !important;
        background: #FFFFFF !important;
    }

    .rz-dropdown-panel .rz-dropdown-item,
    .rz-multiselect-panel .rz-dropdown-item,
    .rz-popup .rz-dropdown-item {
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        color: #1F2937 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }

        .rz-dropdown-panel .rz-dropdown-item:hover,
        .rz-multiselect-panel .rz-dropdown-item:hover,
        .rz-popup .rz-dropdown-item:hover {
            background: #EEF2F7 !important;
            color: #0F172A !important;
        }

        .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight,
        .rz-multiselect-panel .rz-dropdown-item.rz-state-highlight,
        .rz-popup .rz-dropdown-item.rz-state-highlight {
            background: #243044 !important;
            color: #F8FAFC !important;
        }

    .rz-dropdown-panel .rz-dropdown-filter,
    .rz-multiselect-panel .rz-dropdown-filter {
        margin: 8px 10px !important;
        min-height: 40px !important;
        border-radius: 8px !important;
        border: 1px solid #D8DEE8 !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
    }

        .rz-dropdown-panel .rz-dropdown-filter input,
        .rz-multiselect-panel .rz-dropdown-filter input {
            height: 38px !important;
            min-height: 38px !important;
            padding: 0 10px !important;
            font-size: 16px !important;
            color: #0F172A !important;
        }

/* =========================
   REGISTER - RESPONSIVE
   ========================= */

@media (max-width: 900px) {
    .register-page.register-step-2 .register-shell {
        padding: 24px 18px !important;
    }

    .register-page.register-step-2 .register-form-card {
        max-width: 620px !important;
    }

    .register-page.register-step-2 .register-step-two-top {
        grid-template-columns: 1fr !important;
    }

    .register-page.register-step-2 .register-photo-upload-shell {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
       
    }
}

@media (max-width: 640px) {
    .register-page .register-actions,
    .register-page.register-step-1 .register-actions,
    .register-page.register-step-2 .register-actions,
    .register-page.register-step-3 .register-actions {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .register-page .register-email-row {
        grid-template-columns: 1fr !important;
    }

    .register-page .register-email-button,
    .register-page .rz-button.register-email-button,
    .register-page .register-email-confirm-button,
    .register-page .rz-button.register-email-confirm-button,
    .register-page .register-photo-select-button,
    .register-page.register-step-2 .register-photo-select-button {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .register-page.register-step-2 .register-grid-two {
        grid-template-columns: 1fr !important;
    }

    .register-page.register-step-3 .register-step-content-last {
        max-width: none !important;
    }

    .register-page .register-form-header h1 {
        font-size: var(--register-title-lg) !important;
    }

        .register-page .register-form-header h2,
        .register-page .register-form-header h1 span {
            font-size: var(--register-title-2) !important;
        }

    .register-page .sport-label,
    .register-page .register-field > label,
    .register-page .register-field-full > label {
        font-size: var(--register-subtitle) !important;
    }

    .register-page,
    .register-page input,
    .register-page button,
    .register-page .rz-button,
    .register-page .sport-input,
    .register-page .rz-dropdown-label,
    .register-page .rz-placeholder {
        font-size: var(--register-body) !important;
    }
}


/* =========================================================
   FIX DEFINITIVO LOGIN - Campos iguales al Register
   PEGAR AL FINAL DEL app.css
   ========================================================= */

html body #app .sport-login-page .sport-login-form .sport-form-group {
    margin: 0 0 16px 0 !important;
}

html body #app .sport-login-page .sport-login-form .sport-label {
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #0F172A !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

/* Wrapper exacto como register */
html body #app .sport-login-page .sport-login-form .sport-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ícono izquierdo */
html body #app .sport-login-page .sport-login-form .sport-input-icon {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
    width: 42px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9AA4B2 !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

    html body #app .sport-login-page .sport-login-form .sport-input-icon .rz-icon,
    html body #app .sport-login-page .sport-login-form .sport-input-icon .rzi {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
        line-height: 18px !important;
        color: #9AA4B2 !important;
    }

/* Input base */
html body #app .sport-login-page .sport-login-form input.sport-input,
html body #app .sport-login-page .sport-login-form .sport-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px 0 42px !important;
    border-radius: 8px !important;
    border: 1px solid #D8DEE8 !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    font-size: 16px !important;
    line-height: 46px !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
}

    /* Placeholder */
    html body #app .sport-login-page .sport-login-form input.sport-input::placeholder,
    html body #app .sport-login-page .sport-login-form .sport-input::placeholder {
        color: #9CA3AF !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    /* Focus */
    html body #app .sport-login-page .sport-login-form input.sport-input:focus,
    html body #app .sport-login-page .sport-login-form .sport-input:focus {
        border-color: #243044 !important;
        box-shadow: 0 0 0 3px rgba(36, 48, 68, 0.10) !important;
    }

/* Input contraseña con espacio para el ojito */
html body #app .sport-login-page .sport-login-form input.sport-input-password,
html body #app .sport-login-page .sport-login-form .sport-input-password {
    padding-left: 42px !important;
    padding-right: 58px !important;
}

/* Botón ojito */
html body #app .sport-login-page .sport-login-form .sport-password-toggle {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 3 !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #D8DEE8 !important;
    border-radius: 0 8px 8px 0 !important;
    background: #E5EAF1 !important;
    color: #64748B !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transform: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

    html body #app .sport-login-page .sport-login-form .sport-password-toggle:hover:not(:disabled) {
        background: #DDE4EE !important;
        color: #0F172A !important;
        transform: none !important;
    }

html body #app .sport-login-page .sport-login-form .sport-password-eye-icon {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    flex: 0 0 auto !important;
    stroke: currentColor !important;
}

/* Quitar radios globales de Radzen si se meten */
html body #app .sport-login-page .sport-login-form .rz-inputtext,
html body #app .sport-login-page .sport-login-form input.rz-inputtext {
    border-radius: 8px !important;
}

/* =========================================================
   RECONEXIÓN INVISIBLE DE BLAZOR SERVER
   ========================================================= */

#components-reconnect-modal,
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-hide,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
}