/* ============================================================
   URBAN CLIMBING — Capa de marca de la app de jugador
   Mismos tokens y lenguaje visual que la web (css/urban.css del
   proyecto WEB). Se carga LA ULTIMA para poder pisar bootstrap,
   jugadores.css y estilo.css.
   Fuentes en /fonts, imagenes de marca en /img/urban.
   ============================================================ */

/* ===== FUENTES DE MARCA ===== */
@font-face {
    font-family: 'Owners';
    src: url('../fonts/Owners.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Race Sport';
    src: url('../fonts/RaceSport.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: url('../fonts/Mabry-Pro.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: url('../fonts/Mabry-Pro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: url('../fonts/Mabry-Pro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== TOKENS ===== */
:root {
    --uc-orange: #E8451A;
    --uc-orange-dark: #C03510;
    --uc-salmon: #F5C5B0;
    --uc-salmon-bg: #FAD9CC;
    --uc-salmon-card: #FCDDD5;
    --uc-dark: #111111;
    --uc-dark-soft: #2a2a2a;
    --uc-green: #23A476;
    --uc-green-dark: #1c8a63;
    --uc-gray-nav: #F5F5F5;
    --uc-gray-line: #e0e0e0;
    --uc-gray-cta: #EBEBEB;
    --uc-gray-text: #555555;
    --uc-white: #FFFFFF;
    --uc-danger: #C03510;
    --uc-font-cond: 'Race Sport','Barlow Condensed','Arial Narrow',sans-serif;
    --uc-font: 'Barlow','Mabry Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
    --uc-radius: 6px;
}

/* ===== BASE ===== */
html, body,
body.app_master,
.app_master input,
.app_master select,
.app_master textarea,
.app_master button {
    font-family: var(--uc-font) !important;
}

html, body {
    color: var(--uc-dark);
    background: var(--uc-white);
}

.app_master #page-content-wrapper,
.app_master .container-fluid {
    background: var(--uc-white);
}

/* Titulares de marca: condensada, italica, mayusculas */
h1, h2, h3,
.app_master h1,
.app_master h2,
.app_master h3 {
    font-family: var(--uc-font-cond);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -.5px;
    color: var(--uc-dark);
}

a {
    color: var(--uc-dark) !important;
    text-decoration: none;
}

    a:hover, a:active, a:focus {
        color: var(--uc-orange) !important;
        text-decoration: none;
    }

/* ===== CABECERA DE LA APP ===== */
.uc-app-nav {
    background: var(--uc-white);
    border-bottom: 1px solid var(--uc-gray-line);
    padding: .65rem 1rem;
    margin-bottom: 0;
}

.uc-app-nav-logo img {
    height: 46px;
    width: auto;
}

.uc-app-nav-user {
    text-align: right;
    font-size: 13px;
    color: var(--uc-gray-text);
}

    .uc-app-nav-user .uc-app-user-name {
        font-weight: 700;
        color: var(--uc-dark);
        display: block;
        line-height: 1.2;
    }

/* Barra de iconos de navegacion */
.MenuIconosDiv {
    padding: .5rem 0 .25rem;
    background: var(--uc-white);
    border-bottom: 1px solid var(--uc-gray-line);
    margin-bottom: 1rem;
}

.MenuIconos {
    color: var(--uc-dark);
    font-size: 1.5rem;
    line-height: 1;
}

.MenuIconosDiv a {
    text-decoration: none !important;
    border: 1px solid var(--uc-gray-line);
    border-radius: 50%;
    height: 44px;
    width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 3px;
    background: var(--uc-white);
    transition: all .15s;
}

    .MenuIconosDiv a:hover {
        border-color: var(--uc-orange) !important;
        background: var(--uc-orange) !important;
    }

        .MenuIconosDiv a:hover i,
        .MenuIconosDiv a:hover .MenuIconos {
            color: #fff !important;
        }

    .MenuIconosDiv a.activo {
        border-color: var(--uc-orange) !important;
        background: var(--uc-orange) !important;
    }

        .MenuIconosDiv a.activo i,
        .MenuIconosDiv a.activo .MenuIconos {
            color: #fff !important;
        }

/* Nombre de usuario / logout de la LoginView del master */
#HeadLoginView_HeadLoginStatus,
.app_master #HeadLoginView_HeadLoginStatus {
    color: #fff !important;
}

/* El footer y la banda de patrocinadores viven fuera de #page-content-wrapper
   para ir a sangre completa. jugadores.css lo deja en position:absolute por
   debajo de 768px (solo pasa a relative en >=768px), lo que lo sacaria del
   flujo y superpondria el footer al contenido. En app_master el sidebar esta
   oculto, asi que el absolute no aporta nada. */
.app_master #page-content-wrapper,
.app_master #wrapper.toggled #page-content-wrapper {
    position: relative;
}

/* ===== PIE (mismo componente que la web: .uc-footer) =====
   Portado tal cual de WEB/css/urban.css. Los !important sobre el color de los
   enlaces son el unico añadido: hacen falta para pisar estilo.css/jugadores.css,
   que la web no carga. */
.uc-footer {
    background: linear-gradient(to bottom,var(--uc-dark-soft) 0%,var(--uc-dark) 100%);
    padding: 2.5rem 4rem;
}

.uc-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.uc-footer-logos {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .uc-footer-logos img {
        height: 38px;
        width: auto;
        filter: brightness(0) invert(1);
    }

.uc-footer-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.2);
}

.uc-footer-com {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    line-height: 1.3;
}

.uc-footer-right {
    text-align: right;
}

.uc-footer-email {
    font-size: 11px;
    color: rgba(255,255,255,.7);
    margin-bottom: 10px;
}

    .uc-footer-email a {
        color: rgba(255,255,255,.7) !important;
        text-decoration: none;
    }

        .uc-footer-email a:hover {
            color: #fff !important;
        }

.uc-footer-socials {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.uc-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7) !important;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}

    .uc-social:hover {
        border-color: #fff;
        color: #fff !important;
    }

.uc-footer-legal {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

    .uc-footer-legal a {
        color: rgba(255,255,255,.4) !important;
        font-size: 11px;
        text-decoration: none;
        cursor: pointer;
    }

        .uc-footer-legal a:hover {
            color: rgba(255,255,255,.7) !important;
        }

.uc-footer-legal-sep {
    color: rgba(255,255,255,.2);
    font-size: 11px;
}

.uc-footer-line {
    height: 3px;
    background: var(--uc-orange);
}

/* mismo punto de ruptura que la web */
@media (max-width:900px) {
    .uc-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .uc-footer-right {
        text-align: center;
    }

    .uc-footer-socials, .uc-footer-legal {
        justify-content: center;
    }
}

/* ===== PANTALLAS OSCURAS (login, recuperar pass, error) ===== */
.uc-dark-page {
    background: var(--uc-dark) !important;
    color: #fff;
}

    .uc-dark-page h1,
    .uc-dark-page h2,
    .uc-dark-page h3,
    .uc-dark-page label,
    .uc-dark-page span {
        color: #fff;
    }

    .uc-dark-page a {
        color: rgba(255,255,255,.8) !important;
    }

        .uc-dark-page a:hover,
        .uc-dark-page a:focus {
            color: var(--uc-orange) !important;
        }

    .uc-dark-page .boton-recuperapass {
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.35) !important;
    }

        .uc-dark-page .boton-recuperapass:hover {
            border-color: var(--uc-orange) !important;
            color: var(--uc-orange) !important;
        }

/* El pie conserva los colores de la web tambien en las pantallas oscuras:
   .uc-dark-page a / span son mas especificos que .uc-social o
   .uc-footer-legal a y, al ir despues en el archivo, ganaban el desempate. */
.uc-dark-page .uc-footer-email a {
    color: rgba(255,255,255,.7) !important;
}

    .uc-dark-page .uc-footer-email a:hover {
        color: #fff !important;
    }

.uc-dark-page a.uc-social {
    color: rgba(255,255,255,.7) !important;
}

    .uc-dark-page a.uc-social:hover {
        color: #fff !important;
    }

.uc-dark-page .uc-footer-legal a {
    color: rgba(255,255,255,.4) !important;
}

    .uc-dark-page .uc-footer-legal a:hover {
        color: rgba(255,255,255,.7) !important;
    }

.uc-dark-page .uc-footer-legal-sep {
    color: rgba(255,255,255,.2);
}

/* El logo de marca es oscuro: sobre fondo negro se invierte a blanco */
.uc-logo-invert {
    filter: brightness(0) invert(1);
}

/* ===== BOTONES DE MARCA ===== */
.uc-btn {
    display: inline-block;
    background: var(--uc-orange);
    color: #fff !important;
    border: 1px solid var(--uc-orange);
    cursor: pointer;
    padding: 12px 28px;
    border-radius: var(--uc-radius);
    font-family: var(--uc-font);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}

    .uc-btn:hover {
        background: var(--uc-orange-dark);
        border-color: var(--uc-orange-dark);
        color: #fff !important;
    }

.uc-btn--outline {
    background: #fff;
    border: 1px solid var(--uc-orange);
    color: var(--uc-orange) !important;
}

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

.uc-btn--dark {
    background: var(--uc-dark);
    border-color: var(--uc-dark);
    color: #fff !important;
}

    .uc-btn--dark:hover {
        background: #000;
        border-color: #000;
    }

.uc-btn--block {
    width: 100%;
    text-align: center;
}

/* ===== OVERRIDES DE BOOTSTRAP ===== */
.btn-primary,
.app_master .btn-primary {
    background-color: var(--uc-orange) !important;
    border-color: var(--uc-orange) !important;
    color: #fff !important;
    border-radius: var(--uc-radius) !important;
    font-weight: 700;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .app_master .btn-primary:hover {
        background-color: var(--uc-orange-dark) !important;
        border-color: var(--uc-orange-dark) !important;
        color: #fff !important;
    }

.btn-outline-primary {
    color: var(--uc-orange) !important;
    border-color: var(--uc-orange) !important;
    background: #fff !important;
    border-radius: var(--uc-radius) !important;
    font-weight: 700;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background: var(--uc-orange) !important;
        color: #fff !important;
    }

.btn-secondary {
    background-color: var(--uc-dark) !important;
    border-color: var(--uc-dark) !important;
    color: #fff !important;
    border-radius: var(--uc-radius) !important;
}

.btn-success {
    background-color: var(--uc-green) !important;
    border-color: var(--uc-green) !important;
    color: #fff !important;
    border-radius: var(--uc-radius) !important;
}

    .btn-success:hover {
        background-color: var(--uc-green-dark) !important;
        border-color: var(--uc-green-dark) !important;
    }

.btn-danger {
    background-color: var(--uc-danger) !important;
    border-color: var(--uc-danger) !important;
    border-radius: var(--uc-radius) !important;
}

.btn-link {
    color: var(--uc-orange) !important;
}

.text-primary {
    color: var(--uc-orange) !important;
}

.bg-primary {
    background-color: var(--uc-orange) !important;
}

.border-primary {
    border-color: var(--uc-orange) !important;
}

.badge.bg-primary,
.badge-primary {
    background-color: var(--uc-orange) !important;
}

.badge.bg-secondary {
    background-color: var(--uc-dark) !important;
}

.alert-primary {
    background-color: var(--uc-salmon-bg);
    border-color: var(--uc-salmon);
    color: var(--uc-dark);
}

.progress-bar {
    background-color: var(--uc-orange) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--uc-orange) !important;
    color: #fff !important;
    border-radius: var(--uc-radius);
}

.nav-tabs .nav-link.active {
    color: var(--uc-orange) !important;
    border-bottom-color: var(--uc-orange) !important;
}

.page-item.active .page-link {
    background-color: var(--uc-orange) !important;
    border-color: var(--uc-orange) !important;
    color: #fff !important;
}

.page-link {
    color: var(--uc-dark) !important;
}

.list-group-item.active {
    background-color: var(--uc-orange) !important;
    border-color: var(--uc-orange) !important;
}

.form-check-input:checked {
    background-color: var(--uc-orange) !important;
    border-color: var(--uc-orange) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--uc-orange) !important;
    box-shadow: 0 0 0 .2rem rgba(232,69,26,.15) !important;
}

.spinner-border,
.spinner-grow {
    color: var(--uc-orange);
}

/* ===== FORMULARIOS (mismo trato que la web) ===== */
form input[type='text'],
form input[type='password'],
form input[type='email'],
form input[type='tel'],
form input[type='number'],
form input[type='date'],
form input[type='search'],
form select,
form textarea,
.app_master input[type='text'],
.app_master input[type='password'],
.app_master input[type='email'],
.app_master input[type='date'],
.app_master select,
.app_master textarea {
    border: 1px solid #ddd !important;
    border-radius: var(--uc-radius) !important;
    color: var(--uc-dark) !important;
    background: #fff;
    padding: 10px 12px;
    font-family: var(--uc-font);
    font-size: 14px;
}

    form input:focus,
    form select:focus,
    form textarea:focus,
    .app_master input:focus,
    .app_master select:focus,
    .app_master textarea:focus {
        outline: none;
        border-color: var(--uc-orange) !important;
        box-shadow: none;
    }

label,
.uc-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--uc-dark);
}

    .uc-form-label span,
    .obligatorio {
        color: var(--uc-orange);
    }

/* ===== TITULOS DE SECCION ===== */
.titulo {
    margin-bottom: 1.25rem;
}

    .titulo h1,
    .titulo h1 span,
    .titulo h2 {
        font-family: var(--uc-font-cond) !important;
        font-size: clamp(26px,5vw,38px) !important;
        font-weight: 900;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: -1px;
        text-align: center;
        color: var(--uc-dark) !important;
        border: 0;
    }

    .titulo h1 {
        border-bottom: 3px solid var(--uc-orange) !important;
        padding-bottom: 10px;
    }

/* Cabecera de pagina oscura (equivalente a .uc-page-header de la web) */
.uc-page-header {
    background: var(--uc-dark);
    padding: 2rem 1.25rem;
    text-align: center;
}

    .uc-page-header h1 {
        font-family: var(--uc-font-cond);
        font-size: 2rem;
        font-weight: 900;
        font-style: italic;
        text-transform: uppercase;
        color: #fff !important;
        letter-spacing: -1px;
        margin-bottom: .25rem;
        border: 0 !important;
    }

    .uc-page-header p {
        color: rgba(255,255,255,.5);
        font-size: 14px;
        margin: 0;
    }

/* ===== TARJETAS / LISTADOS ===== */
.uc-card {
    background: #fff;
    border: 1px solid var(--uc-gray-line);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.uc-card--salmon {
    background: var(--uc-salmon-card);
    border-color: var(--uc-salmon);
}

.divTorneo {
    border-radius: 8px;
    background: var(--uc-dark) !important;
    padding: 1rem;
    margin-bottom: 1rem;
}

.tituloTorneo {
    font-family: var(--uc-font-cond);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    color: #fff !important;
    letter-spacing: -.5px;
}

.fechaTorneo {
    color: var(--uc-orange) !important;
    font-weight: 700;
    font-size: 14px;
}

/* ===== TABLAS ===== */
.app_master table {
    font-size: 14px;
}

.table > thead > tr > th,
.InscritosCategoria th,
.InscritosDatos th,
.tablaCabecera th {
    background: var(--uc-dark) !important;
    color: #fff !important;
    font-family: var(--uc-font-cond);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-color: var(--uc-dark) !important;
}

.tablaInscritos td {
    background: #fff !important;
    color: var(--uc-dark) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #FCF3F0;
    background-color: #FCF3F0;
}

/* ===== PATROCINADORES (misma banda clara que la web) =====
   margin-top es el unico añadido respecto a la web: alli la ultima seccion de
   contenido ya trae padding inferior propio y en la app no. */
.uc-sponsors {
    background: #f7f7f7;
    padding: 2.5rem 4rem;
    border-top: 1px solid #eee;
    margin-top: 2rem;
}

.uc-sponsors-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

    .uc-sponsors-row:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.uc-sponsors-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bbb;
    text-align: center;
}

.uc-sponsors-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    font-family: var(--uc-font-cond);
    font-weight: 800;
    color: #888;
}

    .uc-sponsors-logos img {
        height: 40px;
        width: auto;
        object-fit: contain;
    }

/* ===== ESTADOS ===== */
.uc-estado-pagado {
    color: var(--uc-green);
    font-weight: 700;
}

.uc-estado-pendiente {
    color: var(--uc-orange);
    font-weight: 700;
}

.badge-notificacion {
    background: var(--uc-orange) !important;
}

/* ===== SWEETALERT2 ===== */
.swal2-popup {
    font-family: var(--uc-font) !important;
    border-radius: 10px !important;
}

.swal2-title {
    font-family: var(--uc-font-cond) !important;
    font-style: italic;
    text-transform: uppercase;
    color: var(--uc-dark) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--uc-orange) !important;
    border-radius: var(--uc-radius) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--uc-dark) !important;
    border-radius: var(--uc-radius) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width:576px) {
    .uc-app-nav-logo img {
        height: 38px;
    }

    .MenuIconosDiv a {
        height: 40px;
        width: 40px;
        margin: 2px;
    }

    .MenuIconos {
        font-size: 1.3rem;
    }
}