/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background: #080808;
    --surface: #111111;
    --surface-2: #171717;
    --text: #ffffff;
    --muted: #969696;

    /* COLOR DINÁMICO DE ESCUDERÍA */
    --team-primary: #FF2D00;
    --team-secondary: #130300;

    --accent: var(--team-primary);
    --accent-hover: var(--team-primary);

    --border: #292929;
    --success: #32d583;
    --danger: #ff5757;
}

html, body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--background);
    color: var(--text);
    overflow-x: hidden;
}

button, input, select {
    font: inherit;
}

button {
    outline: none;
}

.hidden {
    display: none !important;
}

/* LOGIN */
.app {
    width: 100%;
}

.auth-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
    background: radial-gradient(circle at top, #222 0%, #080808 45%, #050505 100%);
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: rgba(17, 17, 17, 0.97);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
}

.brand {
    text-align: center;
    margin-bottom: 35px;
}

.brand-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.brand h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 3px;
}

.brand h2 {
    color: var(--accent);
    font-size: 22px;
    letter-spacing: 4px;
    margin-top: 3px;
}

.brand p {
    color: var(--muted);
    font-size: 13px;
    margin-top: 12px;
}

.form-section h3 {
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    color: #ccc;
    font-size: 13px;
    margin-bottom: 7px;
}

.input-group input,
.search-input,
.race-select {
    width: 100%;
    height: 48px;
    background: #0b0b0b;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 14px;
    color: #fff;
    outline: none;
    font-size: 14px;
    transition: .2s;
}

.input-group input:focus,
.search-input:focus,
.race-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(225, 6, 0, .15);
}

.password-container {
    position: relative;
}

.password-container input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
}

.remember {
    margin: 8px 0 22px;
    color: #aaa;
    font-size: 13px;
}

.remember input {
    margin-right: 7px;
    accent-color: var(--accent);
}

.main-button {
    width: 100%;
    height: 50px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: .2s;
}

.main-button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.switch-form {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: #888;
}

.switch-form button {
    display: block;
    margin: 8px auto 0;
    background: transparent;
    border: none;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

.message {
    text-align: center;
    min-height: 22px;
    margin-top: 20px;
    font-size: 13px;
}

.message.success {
    color: var(--success);
}

.message.error {
    color: var(--danger);
}

.offline-status {
    text-align: center;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: #777;
    font-size: 11px;
    letter-spacing: 1px;
}

/* APP */
.dashboard {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: #080808;
}

.sidebar {
    width: 250px;
    min-height: 100vh;
    background: #0e0e0e;
    border-right: 1px solid #252525;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.sidebar-brand {
    padding-bottom: 28px;
    border-bottom: 1px solid #252525;
}

.sidebar-brand h2 {
    font-size: 20px;
    letter-spacing: 2px;
}

.sidebar-brand span {
    display: block;
    color: var(--accent);
    letter-spacing: 3px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: bold;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
}

.menu-item {
    width: 100%;
    padding: 14px 15px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #999;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    transition: .2s;
}

.menu-item:hover {
    background: #191919;
    color: #fff;
}

.menu-item.active {
    background: var(--accent);
    color: #fff;
}

.logout-button {
    margin-top: auto;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid #333;
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    transition: .2s;
}

.logout-button:hover {
    color: #fff;
    border-color: var(--accent);
}

.dashboard-content {
    flex: 1;
    min-width: 0;
    padding: 35px;
}

.dashboard-header,
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-small {
    font-size: 11px;
    letter-spacing: 3px;
    color: #777;
}

.dashboard-header h1,
.page-header h1 {
    margin-top: 7px;
    font-size: 28px;
}

.dashboard-header h1 span {
    color: var(--accent);
}

.page-subtitle {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
}

.profile-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #171717;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.dashboard-hero {
    margin-top: 35px;
    min-height: 260px;
    padding: 45px;
    border-radius: 18px;
    display: flex;
    align-items: center;

    background: linear-gradient(
        110deg,
        var(--team-primary),
        var(--team-secondary),
        rgba(5, 5, 5, .98)
    );

    border: 1px solid #2b2b2b;
}

.hero-label {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.dashboard-hero h2 {
    font-size: 42px;
    line-height: 1.05;
}

.dashboard-hero p {
    color: #ddd;
    margin-top: 18px;
    max-width: 500px;
    line-height: 1.6;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.dashboard-card {
    position: relative;
    min-height: 190px;
    padding: 25px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid #262626;
    transition: .2s;
    cursor: pointer;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.card-icon {
    font-size: 30px;
    margin-bottom: 20px;
}

.dashboard-card h3 {
    font-size: 18px;
}

.dashboard-card p {
    margin-top: 10px;
    color: #888;
    font-size: 13px;
    line-height: 1.5;
}

.card-number {
    position: absolute;
    right: 22px;
    bottom: 18px;
    font-size: 26px;
    font-weight: bold;
    color: var(--accent);
}

/* CIRCUITOS */
.toolbar {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-input {
    max-width: 420px;
}

.toolbar-count {
    color: #777;
    font-size: 13px;
}

.circuits-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.circuit-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: .22s;
}

.circuit-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.circuit-image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    background: #0b0b0b;
}

.circuit-card-body {
    padding: 20px;
}

.circuit-country {
    color: var(--accent);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.circuit-card h3 {
    margin-top: 8px;
    font-size: 21px;
}

.circuit-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.meta-box {
    padding: 12px;
    border-radius: 10px;
    background: #0b0b0b;
    border: 1px solid #222;
}

.meta-box small {
    display: block;
    color: #777;
    font-size: 10px;
    letter-spacing: 1px;
}

.meta-box strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
}

/* DETALLE */
.back-button {
    background: transparent;
    color: #aaa;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    margin-bottom: 22px;
}

.back-button:hover {
    color: #fff;
    border-color: var(--accent);
}

.circuit-detail-hero {
    position: relative;
    min-height: 350px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.circuit-detail-hero img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.circuit-detail-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 35px;
    background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.15));
}

.circuit-detail-overlay h1 {
    font-size: 38px;
}

.circuit-detail-overlay p {
    margin-top: 8px;
    color: #ddd;
}

.detail-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
}

.detail-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.detail-panel h2 {
    font-size: 19px;
    margin-bottom: 18px;
}

.detail-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.detail-stat {
    padding: 16px;
    background: #0b0b0b;
    border: 1px solid #222;
    border-radius: 10px;
}

.detail-stat small {
    color: #777;
}

.detail-stat strong {
    display: block;
    margin-top: 7px;
    font-size: 20px;
}

.race-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.race-option {
    border: 1px solid #2b2b2b;
    background: #0b0b0b;
    color: #bbb;
    padding: 14px 10px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: .2s;
}

.race-option:hover,
.race-option.active {
    border-color: var(--accent);
    background: rgba(225,6,0,.13);
    color: #fff;
}

.race-option strong {
    display: block;
    color: #fff;
    margin-bottom: 4px;
}

.race-result {
    margin-top: 18px;
    padding: 20px;
    background: linear-gradient(120deg, rgba(225,6,0,.16), #0b0b0b);
    border: 1px solid rgba(225,6,0,.35);
    border-radius: 12px;
}

.race-result .big-number {
    color: var(--accent);
    font-size: 38px;
    font-weight: 900;
}

.race-result p {
    color: #aaa;
    margin-top: 4px;
}

.setup-shortcuts {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.setup-shortcut {
    padding: 18px;
    border-radius: 12px;
    border: 1px solid #2b2b2b;
    background: #0b0b0b;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.setup-shortcut:hover {
    border-color: var(--accent);
}

.setup-shortcut span {
    display: block;
    color: #888;
    font-size: 12px;
    margin-top: 6px;
}

.coming-soon-card,
.profile-panel {
    max-width: 680px;
    margin: 80px auto 0;
    padding: 40px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.coming-soon-card > span,
.profile-avatar {
    font-size: 52px;
}

.coming-soon-card h2,
.profile-panel h2 {
    margin-top: 18px;
}

.coming-soon-card p,
.profile-panel p {
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .circuits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 1100px) {
    .dashboard {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        width: 100%;
        min-height: auto;
    }

    .sidebar-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .logout-button {
        margin-top: 20px;
    }

    .dashboard-content {
        padding: 22px;
    }

    .dashboard-hero {
        padding: 30px 25px;
    }

    .dashboard-hero h2 {
        font-size: 32px;
    }

    .circuits-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .race-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .circuit-detail-overlay h1 {
        font-size: 28px;
    }
}

@media (max-width: 1100px) {
    .auth-card {
        padding: 30px 22px;
    }

    .brand h1 {
        font-size: 24px;
    }

    .brand h2 {
        font-size: 19px;
    }

    .toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .setup-shortcuts,
    .detail-stats {
        grid-template-columns: 1fr;
    }
}


/* V1.4 - IMAGEN MANUAL DE CIRCUITO 800x800 */
.circuit-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #090909;
    overflow: hidden;
    position: relative;
}
.circuit-image-wrap .circuit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-placeholder,
.detail-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: radial-gradient(circle, #1b1b1b, #080808);
    color: #777;
    text-align: center;
}
.image-placeholder span,
.detail-image-placeholder span { font-size: 38px; }
.image-placeholder strong,
.detail-image-placeholder strong { color: #aaa; font-size: 13px; letter-spacing: 2px; }
.image-placeholder small,
.detail-image-placeholder small { color: #e10600; }
.circuit-detail-hero { aspect-ratio: 1 / 1; max-height: 650px; }
.circuit-detail-hero img { width:100%; height:100%; object-fit:cover; }
.detail-image-placeholder { position:absolute; inset:0; }
.sprint-badge {
    display:inline-block;
    margin-left:8px;
    padding:4px 7px;
    border-radius:5px;
    background:#e10600;
    color:#fff;
    font-size:9px;
    letter-spacing:1px;
}


/* =========================================
   V1.5 - SUBIR FOTO MANUALMENTE
========================================= */

.circuit-image-wrap {
    position: relative;
}

.image-file-input {
    display: none;
}

.image-upload-button {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 4;

    padding: 11px 14px;

    background: rgba(8, 8, 8, 0.92);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    backdrop-filter: blur(8px);

    transition: 0.2s;
}

.image-upload-button:hover {
    background: #e10600;
    border-color: #e10600;
}

.detail-upload-button {
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 7;

    padding: 12px 16px;

    background: rgba(8, 8, 8, 0.90);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    backdrop-filter: blur(8px);

    transition: 0.2s;
}

.detail-upload-button:hover {
    background: #e10600;
    border-color: #e10600;
}

.image-placeholder {
    padding-bottom: 52px;
}

.detail-image-placeholder {
    padding: 80px 25px 25px;
}


/* =========================================
   V1.6 - SETUPS + ADMIN
========================================= */

.admin-badge {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(225, 6, 0, 0.15);
    border: 1px solid rgba(225, 6, 0, 0.45);
    color: #ff4c47;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.admin-layout {
    margin-top: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr);
    gap: 20px;
    align-items: start;
}

.admin-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.setup-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin-top: 8px;
}

.setup-form-section-title {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2b2b2b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.setup-field label {
    display: block;
    margin-bottom: 7px;
    color: #aaa;
    font-size: 12px;
}

.setup-field input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: #0b0b0b;
    color: #fff;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
    outline: none;
}

.setup-field input:focus {
    border-color: #e10600;
    box-shadow: 0 0 0 2px rgba(225,6,0,.13);
}

.admin-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-top: 24px;
}

.secondary-button {
    min-height: 50px;
    padding: 0 18px;
    border-radius: 8px;
    background: transparent;
    color: #bbb;
    border: 1px solid #333;
    cursor: pointer;
    font-weight: 700;
}

.danger-outline:hover {
    color: #fff;
    border-color: #ff5757;
}

.admin-message {
    min-height: 20px;
    margin-top: 12px;
    font-size: 13px;
    color: #32d583;
}

.admin-preview-panel {
    position: sticky;
    top: 35px;
}

.setup-preview-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #2b2b2b;
    background: #0b0b0b;
}

.setup-preview-header {
    padding: 18px;
    background: linear-gradient(120deg, rgba(225,6,0,.95), rgba(70,0,0,.9));
}

.setup-preview-header.wet {
    background: linear-gradient(120deg, rgba(10,87,170,.95), rgba(3,26,55,.95));
}

.setup-preview-header small {
    display: block;
    margin-bottom: 6px;
    opacity: .8;
    letter-spacing: 1px;
}

.setup-preview-header h3 {
    font-size: 22px;
}

.setup-values {
    padding: 18px;
}

.setup-value-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #1f1f1f;
    font-size: 12px;
}

.setup-value-row:last-child {
    border-bottom: 0;
}

.setup-value-row span {
    color: #8f8f8f;
}

.setup-value-row strong {
    color: #fff;
    text-align: right;
}

.published-setups-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.published-setup-card {
    overflow: hidden;
    background: #111;
    border: 1px solid #292929;
    border-radius: 16px;
}

.published-setup-card-header {
    padding: 20px;
    background: linear-gradient(120deg, rgba(225,6,0,.95), rgba(55,0,0,.85));
}

.published-setup-card-header.wet {
    background: linear-gradient(120deg, rgba(10,87,170,.95), rgba(3,26,55,.95));
}

.published-setup-card-header .setup-weather {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.published-setup-card-header h3 {
    margin-top: 8px;
    font-size: 22px;
}

.published-setup-meta {
    margin-top: 7px;
    color: rgba(255,255,255,.75);
    font-size: 12px;
}

.setup-empty-state {
    grid-column: 1 / -1;
    padding: 50px 25px;
    text-align: center;
    background: #111;
    border: 1px dashed #333;
    border-radius: 16px;
    color: #888;
}

.setup-empty-state span {
    display: block;
    margin-bottom: 12px;
    font-size: 42px;
}

@media (max-width: 1100px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-preview-panel {
        position: static;
    }
}

@media (max-width: 1100px) {
    .setup-form-grid,
    .admin-selector-grid,
    .published-setups-grid,
    .admin-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   V1.7 - MULTIUSUARIO
========================================= */

.users-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}

.users-admin-list {
    display: grid;
    gap: 12px;
}

.user-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(180px, .7fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: #0b0b0b;
    border: 1px solid #252525;
    border-radius: 12px;
}

.user-admin-main strong {
    display: block;
    font-size: 15px;
}

.user-admin-main span,
.user-admin-role small {
    display: block;
    margin-top: 5px;
    color: #777;
    font-size: 12px;
}

.user-role-badge {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    border: 1px solid #333;
    color: #aaa;
}

.user-role-badge.admin {
    color: #ff665f;
    border-color: rgba(225,6,0,.45);
    background: rgba(225,6,0,.12);
}

.role-select {
    width: 100%;
    height: 42px;
    background: #111;
    color: #fff;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0 10px;
}

.user-action-button {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    background: #171717;
    color: #fff;
    border: 1px solid #333;
    cursor: pointer;
}

.user-action-button:hover {
    border-color: #e10600;
}

.profile-role-badge {
    display: inline-block;
    margin-top: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(225,6,0,.12);
    border: 1px solid rgba(225,6,0,.35);
    color: #ff716b !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

@media (max-width: 1100px) {
    .users-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .user-admin-row {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   V1.8.1 - PERMISOS DE SETUPS Y USUARIOS
========================================= */

.access-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.access-badge.allowed {
    color: #65e6a3;
    background: rgba(50, 213, 131, .10);
    border: 1px solid rgba(50, 213, 131, .35);
}

.access-badge.blocked {
    color: #ff8c8c;
    background: rgba(255, 87, 87, .08);
    border: 1px solid rgba(255, 87, 87, .35);
}

.user-admin-actions {
    display: grid;
    gap: 8px;
}

.permission-button,
.delete-user-button {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.permission-button {
    background: #171717;
    color: #fff;
    border: 1px solid #333;
}

.permission-button.enable:hover {
    border-color: #32d583;
}

.permission-button.disable:hover {
    border-color: #ffae57;
}

.delete-user-button {
    background: rgba(255, 87, 87, .08);
    color: #ff8c8c;
    border: 1px solid rgba(255, 87, 87, .35);
}

.delete-user-button:hover {
    background: rgba(255, 87, 87, .16);
    color: #fff;
}

.permission-button:disabled,
.delete-user-button:disabled,
.user-action-button:disabled,
.role-select:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.access-denied-card {
    max-width: 720px;
    margin: 70px auto 0;
    padding: 44px 28px;
    text-align: center;
    border: 1px solid #333;
    border-radius: 18px;
    background: #111;
}

.access-denied-card span {
    display: block;
    font-size: 52px;
    margin-bottom: 14px;
}

.access-denied-card p {
    color: #999;
    margin-top: 12px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .user-admin-row {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   ADMIN - CONTADORES DE USUARIOS
========================================= */

.users-admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 28px;
}

.users-admin-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.user-stat-card {
    min-height: 110px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.015)
        );
    display: flex;
    align-items: center;
    gap: 18px;
}

.user-stat-card > span {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    font-size: 22px;
    flex-shrink: 0;
}

.user-stat-card div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-stat-card strong {
    font-size: 28px;
    line-height: 1;
    color: #ffffff;
}

.user-stat-card small {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b8b8b;
}

.user-stat-card.enabled {
    border-color: rgba(0, 200, 90, 0.28);
}

.user-stat-card.enabled > span {
    background: rgba(0, 200, 90, 0.10);
}

.user-stat-card.blocked {
    border-color: rgba(255, 65, 65, 0.25);
}

.user-stat-card.blocked > span {
    background: rgba(255, 65, 65, 0.10);
}


/* =========================================
   ADMIN - FILTRO USUARIOS
========================================= */

.users-admin-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.users-admin-filter label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aaaaaa;
}

.users-admin-filter .race-select {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #0c0c0c;
    color: #ffffff;
    font-size: 14px;
    outline: none;
}

.users-admin-filter .race-select:focus {
    border-color: rgba(255,0,0,0.55);
}


/* =========================================
   SEPARACIÓN LISTADO DE USUARIOS
========================================= */

#usersAdminRows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .users-admin-stats {
        grid-template-columns: 1fr;
    }

    .user-stat-card {
        min-height: 90px;
    }
}

/* =========================================
   PERFIL V2
========================================= */

#page-profile {
    padding-bottom: 50px;
}

.profile-panel {
    max-width: 880px;
    margin: 0 auto;
}

.profile-main-card {
    text-align: center;
    padding: 34px 24px;
}

.profile-avatar {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.14);
}

.profile-main-card h2 {
    margin: 5px 0;
}

.profile-main-card p {
    margin: 5px 0;
}

.profile-edit-main-button {
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.profile-edit-main-button:hover {
    background: rgba(255,255,255,0.08);
}


/* =========================================
   EDITAR PERFIL - DISEÑO MEJORADO
========================================= */

.profile-editor {
    margin-top: 18px;
    padding: 24px;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(0,0,0,0.18)
        );

    box-shadow:
        inset 0 0 35px rgba(0,0,0,0.18);

    overflow: hidden;
}


/* =========================================
   FILAS DEL EDITOR
========================================= */

.profile-editor-row {
    width: 100%;
    min-height: 150px;

    padding: 24px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 14px;

    text-align: center;
}

.profile-editor-row:last-child {
    border-bottom: 0;
}


/* =========================================
   TEXTO
========================================= */

.profile-editor-row > div {
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.profile-editor-row small {
    display: block;

    margin-bottom: 7px;

    color: var(--team-primary);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.profile-editor-row strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    overflow-wrap: anywhere;
}


.profile-change-info {
    display: block;

    margin-top: 5px;

    max-width: 330px;

    color: #888888;

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================
   BOTONES
========================================= */

.profile-secondary-button {
    min-width: 160px;
    min-height: 44px;

    padding: 11px 16px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.14);

    background: #161616;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.profile-secondary-button:hover {
    color: #ffffff;

    border-color: var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            #161616
        );

    box-shadow:
        0 0 16px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        );

    transform: translateY(-1px);
}


/* =========================================
   SELECTOR DE ESCUDERÍA
========================================= */

.profile-team-selector {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    min-width: 0;
}


.profile-team-select {
    min-width: 165px;
    min-height: 44px;

    padding: 0 38px 0 13px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.14);

    background: #101010;

    color: #ffffff;

    outline: none;

    cursor: pointer;
}


.profile-team-select:focus {
    border-color: var(--team-primary);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--team-primary) 15%,
            transparent
        );
}


/* =========================================
   DETALLE DE COLOR DE ESCUDERÍA
========================================= */

.profile-editor::before {
    content: "";

    display: block;

    width: 54px;
    height: 3px;

    margin-bottom: 12px;

    border-radius: 999px;

    background: var(--team-primary);

    box-shadow:
        0 0 12px var(--team-primary);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .profile-editor-row {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .profile-secondary-button {
        width: 100%;
    }


    .profile-team-selector {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .profile-team-select {
        width: 100%;
    }
}


@media (max-width: 1100px) {

    .profile-editor {
        padding: 18px;
    }


    .profile-editor-row {
        padding: 18px 0;
    }
}


/* =========================================
   ICONO ACTUAL
========================================= */

.current-icon-display {
    display: flex;
    align-items: center;
    gap: 12px;
}

.current-profile-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 25px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}


/* =========================================
   SELECTOR DE ICONOS
========================================= */

.profile-icon-selector {
    position: static;
}


.icon-selector-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


/* =========================================
   MODAL FLOTANTE DE ICONOS
========================================= */

.profile-icon-popover {
    position: fixed;

    top: 50%;
    left: 50%;
    right: auto;

    transform: translate(-50%, -50%);

    z-index: 20000;

    width: min(520px, 92vw);
    max-height: 82vh;

    padding: 22px;

    overflow-y: auto;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

    border:
        1px solid var(--team-primary);

    box-shadow:
        0 30px 100px rgba(0,0,0,0.90),
        0 0 32px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        );
}


/* =========================================
   OCULTAR POPOVER
========================================= */

.profile-icon-popover.hidden {
    display: none;
}


/* =========================================
   TÍTULO
========================================= */

.icon-popover-title {
    text-align: center;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;

    margin-bottom: 18px;
}


/* =========================================
   GRID DE ICONOS
========================================= */

.profile-icon-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================
   OPCIONES
========================================= */

.profile-icon-option {
    min-height: 76px;

    padding: 10px 6px;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.10);

    background: #171717;

    color: #ffffff;

    cursor: pointer;

    font-size: 25px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


.profile-icon-option span {
    font-size: 9px;

    color: #999999;
}


.profile-icon-option:hover {
    transform: translateY(-2px);

    background: #202020;

    border-color: var(--team-primary);
}


/* =========================================
   ICONO SELECCIONADO
========================================= */

.profile-icon-option.active {
    border-color: var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #171717
        );

    box-shadow:
        0 0 14px
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        );
}


.profile-icon-option.active span {
    color: #ffffff;
}


/* =========================================
   GUARDAR ICONO
========================================= */

.profile-icon-save-button {
    width: 100%;

    min-height: 44px;

    margin-top: 18px;

    border: 0;
    border-radius: 11px;

    background: var(--team-primary);

    color: #ffffff;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}


.profile-icon-save-button:hover {
    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .profile-icon-popover {
        width: 92vw;

        max-height: 78vh;

        padding: 18px;
    }


    .profile-icon-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .profile-icon-option {
        min-height: 70px;
    }
}


/* =========================================
   BURBUJA PARA EDITAR USERNAME
========================================= */

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.profile-floating-modal {
    position: relative;
    width: min(430px, 100%);
    padding: 28px;
    border-radius: 20px;
    background: #111111;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 100px rgba(0,0,0,0.75);
}

.profile-floating-modal small {
    color: #777777;
    letter-spacing: 0.13em;
}

.profile-floating-modal h3 {
    margin: 7px 0 8px;
    font-size: 21px;
}

.profile-floating-modal > p {
    color: #999999;
    font-size: 12px;
}

.profile-modal-close {
    position: absolute;
    right: 15px;
    top: 12px;
    border: 0;
    background: transparent;
    color: #888888;
    font-size: 26px;
    cursor: pointer;
}

.profile-input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin-top: 15px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #080808;
    color: #ffffff;
    outline: none;
}

.profile-input:focus {
    border-color: rgba(255,0,0,0.60);
}

.profile-helper-text {
    margin-top: 9px !important;
    font-size: 11px !important;
}

.profile-modal-save {
    width: 100%;
    height: 46px;
    margin-top: 16px;

    border: 0;
    border-radius: 11px;

    background: var(--team-primary);

    color: #ffffff;

    font-weight: 800;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.profile-modal-save:hover {
    transform: translateY(-1px);
    filter: brightness(1.10);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
}

.profile-modal-message {
    margin-top: 12px !important;
    text-align: center;
}


/* =========================================
   OCULTAR ELEMENTOS
========================================= */

.hidden {
    display: none !important;
}


/* ========================================= 
   PERFIL - MÓVIL 
========================================= */ 

@media (max-width: 1100px) { 

    .profile-editor-row { 
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        text-align: center;
    } 

    .profile-icon-selector { 
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;
    } 

    .icon-selector-button { 
        width: min(280px, 100%);

        justify-content: center;

        gap: 10px;
    } 


    /* VENTANA FLOTANTE DE ICONOS */

    .profile-icon-popover { 
        position: fixed;

        top: 50%;
        left: 50%;
        right: auto;

        transform: translate(-50%, -50%);

        width: min(92vw, 520px);
        max-height: 82vh;

        margin: 0;
        padding: 22px;

        overflow-y: auto;

        border-radius: 18px;

        border: 1px solid var(--team-primary);

        background:
            linear-gradient(
                145deg,
                #151515,
                #0d0d0d
            );

        box-shadow:
            0 30px 100px rgba(0, 0, 0, 0.90),
            0 0 30px
            color-mix(
                in srgb,
                var(--team-primary) 20%,
                transparent
            );

        z-index: 20000;
    }


    /* TÍTULO */

    .icon-popover-title {
        text-align: center;

        color: #ffffff;

        font-size: 18px;
        font-weight: 800;

        margin-bottom: 18px;
    }


    /* CUADRÍCULA DE ICONOS */

    .profile-icon-grid { 
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 10px;
    }


    /* CADA ICONO */

    .profile-icon-option {
        min-width: 0;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 6px;
    }


    /* BOTÓN GUARDAR ICONO */

    .profile-icon-save-button {
        width: 100%;

        margin-top: 18px;

        background: var(--team-primary);

        border: 0;
        border-radius: 11px;

        color: #ffffff;

        font-weight: 800;
    }

}
/* =========================================
   ICONO DE PERFIL EN INICIO
========================================= */

.dashboard-profile-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    vertical-align: middle;
}

/* =========================================
   CIRCUITO - BLOQUE SUPERIOR
========================================= */

.circuit-top-layout {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}


/* =========================================
   PANEL DE ESTRATEGIA
========================================= */

.circuit-strategy-panel {
    min-height: 100%;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(255,0,0,0.07),
            rgba(255,255,255,0.015)
        );
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.strategy-header small {
    display: block;
    color: #8d8d8d;
    font-size: 10px;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 6px;
}

.strategy-header h2 {
    margin: 0;
    font-size: 24px;
}

.strategy-edit-button {
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 13px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.strategy-edit-button:hover {
    background: rgba(255,255,255,0.08);
}


/* =========================================
   MODO DE CARRERA
========================================= */

.strategy-race-mode {
    margin-top: 24px;
}


.strategy-race-mode span {
    display: inline-flex;
    align-items: center;

    min-height: 32px;
    padding: 0 12px;

    border-radius: 999px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
}


/* =========================================
   TEXTO DE ESTRATEGIA
========================================= */

.strategy-text {
    margin-top: 20px;
    flex: 1;
    min-height: 220px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.07);
    color: #d7d7d7;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-line;
}

.strategy-text:empty::before {
    content: "Sin estrategia definida.";
    color: #707070;
}


/* =========================================
   PIE DE ESTRATEGIA
========================================= */

.strategy-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #777777;
    font-size: 10px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

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

    .circuit-strategy-panel {
        min-height: 360px;
    }
}

@media (max-width: 1100px) {

    .circuit-strategy-panel {
        padding: 18px;
    }

    .strategy-header {
        flex-direction: column;
        align-items: stretch;
    }

    .strategy-edit-button {
        width: 100%;
    }

    .strategy-footer {
        flex-direction: column;
    }

    .strategy-text {
        min-height: 180px;
    }
}
/* =========================================
   MODAL - EDITAR ESTRATEGIA
========================================= */

.strategy-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(7px);
}

.strategy-modal-overlay.active {
    display: flex;
}


/* =========================================
   VENTANA
========================================= */

.strategy-modal {
    position: relative;

    width: min(600px, 100%);
    padding: 28px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

    border: 1px solid rgba(255,255,255,0.13);

    box-shadow:
        0 30px 100px rgba(0,0,0,0.80);
}


/* =========================================
   CABECERA
========================================= */

.strategy-modal > small {
    display: block;

    margin-bottom: 7px;

    color: #777777;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.strategy-modal h3 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;
}


/* =========================================
   CERRAR
========================================= */

.strategy-modal-close {
    position: absolute;

    top: 14px;
    right: 17px;

    border: 0;
    background: transparent;

    color: #888888;

    font-size: 28px;

    cursor: pointer;
}

.strategy-modal-close:hover {
    color: #ffffff;
}


/* =========================================
   MODO DE CARRERA
========================================= */

.strategy-editor-mode {
    display: inline-flex;

    margin: 18px 0;

    padding: 7px 12px;

    border-radius: 999px;

    border: 1px solid rgba(255,0,0,0.40);

    background: rgba(255,0,0,0.10);

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.06em;
}


/* =========================================
   CUADRO DE TEXTO
========================================= */

.strategy-editor-textarea {
    box-sizing: border-box;

    width: 100%;
    min-height: 260px;

    padding: 16px;

    resize: vertical;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,0.12);

    background: #080808;

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;

    line-height: 1.6;

    outline: none;
}

.strategy-editor-textarea:focus {
    border-color: rgba(255,0,0,0.65);
}


/* =========================================
   GUARDAR
========================================= */

.strategy-save-button {
    width: 100%;
    height: 48px;

    margin-top: 16px;

    border: 0;
    border-radius: 12px;

    background: var(--team-primary);

    color: #ffffff;

    font-weight: 800;

    cursor: pointer;

    transition:
        filter 0.2s ease,
        transform 0.2s ease;
}

.strategy-save-button:hover {
    filter: brightness(1.08);
}

/* =========================================
   MENSAJE
========================================= */

.strategy-editor-message {
    min-height: 18px;

    margin: 12px 0 0;

    text-align: center;

    color: #aaaaaa;

    font-size: 12px;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .strategy-modal {
        padding: 22px;
    }

    .strategy-editor-textarea {
        min-height: 220px;
    }
}

/* =========================================
   ESTRATEGIAS BLOQUEADAS
========================================= */

.strategy-locked-state {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px;
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
}

.strategy-lock-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(255,0,0,0.08);
    border: 1px solid rgba(255,0,0,0.20);
}

.strategy-locked-state strong {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.strategy-locked-state p {
    margin: 0;
    max-width: 340px;
    color: #999999;
    font-size: 12px;
    line-height: 1.5;
}

.strategy-locked-state small {
    color: #666666;
    font-size: 10px;
    letter-spacing: 0.05em;
}

/* =========================================
   REDES SOCIALES EN INICIO
========================================= */

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hero-content {
    flex: 1;
}

.hero-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding-right: 12px;
}

.hero-socials-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.65);
}

.hero-social-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.hero-social-link:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.25);
}

.hero-social-link span {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}


/* YOUTUBE */

.social-youtube {
    color: #ff2a2a;
}


/* KICK */

.social-kick {
    color: #53fc18;
    font-family: Arial, sans-serif;
}


/* TIKTOK */

.social-tiktok {
    color: #ffffff;
}


/* INSTAGRAM */

.social-instagram {
    color: #ff4aa2;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-socials {
        align-items: flex-start;
        padding-right: 0;
        margin-top: 8px;
    }
}

/* =========================================
   CALENDARIO F1 2026
========================================= */

.calendar-live-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--team-primary);
    border-radius: 20px;
    color: var(--team-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.calendar-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--team-primary);
    box-shadow: 0 0 10px var(--team-primary);
}


/* PRÓXIMA CARRERA */

.next-race-card {
    margin-top: 28px;
    min-height: 190px;
    padding: 30px;
    border-radius: 18px;
    border: 1px solid var(--team-primary);

    background:
        linear-gradient(
            120deg,
            var(--team-secondary),
            #0b0b0b 65%
        );

    overflow: hidden;
}

.next-race-content {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    align-items: center;
    gap: 30px;
    min-height: 125px;
}

.next-race-main small {
    display: block;
    margin-bottom: 10px;
    color: var(--team-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.next-race-main h2 {
    margin: 0 0 10px;
    font-size: 32px;
}

.next-race-main p {
    margin: 0;
    color: var(--muted);
}

.next-race-country {
    display: flex;
    align-items: center;
    gap: 12px;
}

.next-race-date {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
}

.next-race-date strong {
    color: var(--team-primary);
    font-size: 18px;
}

.next-race-date span {
    color: var(--muted);
    font-size: 12px;
}


/* CABECERA */

.calendar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 35px 0 18px;
}

.calendar-section-header small {
    color: var(--team-primary);
    font-weight: 700;
    letter-spacing: 1.5px;
}

.calendar-section-header h2 {
    margin-top: 5px;
    font-size: 25px;
}

.calendar-race-count {
    color: var(--muted);
    font-size: 12px;
}


/* GRID */

.f1-calendar-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );
    gap: 16px;
}


/* TARJETAS */

.calendar-race-card {
    position: relative;
    min-height: 220px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    overflow: hidden;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.calendar-race-card:hover {
    transform: translateY(-3px);
    border-color: var(--team-primary);

    background:
        linear-gradient(
            145deg,
            var(--team-secondary),
            var(--surface)
        );
}

.calendar-race-card.live {
    border-color: var(--team-primary);
}

.calendar-race-card.completed {
    opacity: .65;
}

.calendar-race-card.cancelled {
    opacity: .45;
}


/* NÚMERO DE RONDA */

.calendar-round {
    position: absolute;
    right: 18px;
    bottom: 10px;
    color: var(--team-primary);
    font-size: 40px;
    font-weight: 900;
    opacity: .10;
}


/* PARTE SUPERIOR */

.calendar-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-country-flag {
    width: 34px;
    height: 23px;
    object-fit: cover;
    border-radius: 4px;
}


/* ESTADO */

.calendar-status {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
}

.calendar-status.upcoming {
    color: var(--team-primary);
    border: 1px solid var(--team-primary);
}

.calendar-status.live {
    color: #ffffff;
    background: var(--team-primary);
}

.calendar-status.completed {
    color: var(--muted);
    border: 1px solid var(--border);
}

.calendar-status.cancelled {
    color: var(--danger);
    border: 1px solid var(--danger);
}


/* INFORMACIÓN */

.calendar-race-card h3 {
    margin-bottom: 7px;
    padding-right: 15px;
    font-size: 18px;
}

.calendar-circuit {
    color: var(--team-primary);
    font-size: 13px;
    font-weight: 700;
}

.calendar-location {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
}

.calendar-date {
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
}


/* IMAGEN DEL CIRCUITO */

.calendar-track-image {
    width: 90px;
    max-height: 65px;
    object-fit: contain;
    margin-top: 15px;
    opacity: .75;
}


/* CARGANDO / ERROR */

.calendar-loading,
.calendar-error,
.calendar-empty {
    padding: 35px;
    color: var(--muted);
    text-align: center;
}

.calendar-error {
    color: var(--danger);
}


/* =========================================
   CALENDARIO - RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .next-race-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .next-race-date {
        text-align: left;
    }

    .f1-calendar-grid {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(230px, 1fr)
            );
    }
}


@media (max-width: 1100px) {

    .next-race-card {
        padding: 22px;
    }

    .next-race-main h2 {
        font-size: 25px;
    }

    .calendar-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .f1-calendar-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MODAL - CAMBIAR CONTRASEÑA
========================================= */

.password-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: blur(7px);
}

.password-modal-overlay.active {
    display: flex;
}


/* VENTANA */

.password-modal {
    position: relative;

    width: min(520px, 100%);
    padding: 28px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

    border: 1px solid rgba(255,255,255,0.13);

    box-shadow:
        0 30px 100px rgba(0,0,0,0.80);
}


/* CABECERA */

.password-modal > small {
    display: block;

    margin-bottom: 7px;

    color: var(--team-primary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.password-modal h3 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: 24px;
}


/* CERRAR */

.password-modal-close {
    position: absolute;

    top: 14px;
    right: 17px;

    border: 0;
    background: transparent;

    color: #888888;

    font-size: 28px;

    cursor: pointer;
}

.password-modal-close:hover {
    color: #ffffff;
}


/* CAMPOS */

.password-field {
    margin-bottom: 16px;
}

.password-field label {
    display: block;

    margin-bottom: 7px;

    color: #bcbcbc;

    font-size: 11px;
    font-weight: 700;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap .profile-input {
    padding-right: 48px;
}


/* MOSTRAR / OCULTAR */

.password-toggle {
    position: absolute;

    top: 50%;
    right: 9px;

    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #ffffff;

    cursor: pointer;
}

.password-toggle:hover {
    background: rgba(255,255,255,0.06);
}


/* BOTÓN */

.password-save-button {
    width: 100%;
    min-height: 48px;

    margin-top: 8px;

    border: 0;
    border-radius: 12px;

    background: var(--team-primary);

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.05em;

    cursor: pointer;

    transition:
        transform .15s ease,
        filter .15s ease;
}

.password-save-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}


/* MENSAJE */

.password-change-message {
    min-height: 18px;

    margin: 12px 0 0;

    text-align: center;

    color: #bcbcbc;

    font-size: 12px;
}


/* MÓVIL */

@media (max-width: 1100px) {

    .password-modal {
        padding: 22px;
    }
}

.profile-editor-row small,
.profile-editor-row strong,
.profile-change-info {
    text-align: center;
}

.profile-change-info {
    margin-left: auto;
    margin-right: auto;
}

.profile-editor-row .profile-secondary-button {
    margin: 0 auto;
    min-width: 190px;
}

.profile-team-selector {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;
}

.profile-team-select {
    width: min(280px, 100%);
}

.profile-team-selector .profile-secondary-button {
    width: min(280px, 100%);
}

.current-icon-display {
    justify-content: center;
}

.profile-icon-selector {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.profile-icon-selector .profile-secondary-button {
    min-width: 190px;
}

/* =========================================
   CERRAR SELECTOR DE ICONOS
========================================= */

.profile-icon-close {
    position: absolute;

    top: 12px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,0.06);

    color: #999999;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        color .15s ease,
        background .15s ease,
        transform .15s ease;
}


.profile-icon-close:hover {
    color: var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );

    transform: scale(1.05);
}

/* =========================================
   SELECTOR ICONOS - AJUSTES MODAL
========================================= */

.profile-icon-popover {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;

    transform: translate(-50%, -50%) !important;

    z-index: 30001 !important;

    overflow: visible;

    isolation: isolate;
}


/* =========================================
   BOTÓN CERRAR
========================================= */

.profile-icon-close {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 10;

    width: 36px;
    height: 36px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 50%;

    background: #202020;

    color: #ffffff;

    font-size: 26px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}

.profile-icon-close:hover {
    border-color: var(--team-primary);

    color: var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #202020
        );
}


/* Dejar espacio para la X */

.icon-popover-title {
    padding-left: 45px;
    padding-right: 45px;
}

/* =========================================
   FONDO BORROSO DEL SELECTOR
========================================= */

body.icon-modal-open::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 30000;

    background: rgba(0,0,0,0.62);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* =========================================
   FONDO MODAL - SELECTOR DE ICONOS
========================================= */

.profile-icon-backdrop {
    position: fixed;
    inset: 0;

    z-index: 29999;

    background: rgba(0, 0, 0, 0.60);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================================
   MODAL DE ICONOS
========================================= */

#profileIconMenu.profile-icon-popover {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;

    transform: translate(
        -50%,
        -50%
    ) !important;

    z-index: 30000 !important;

    width: min(520px, 92vw);

    max-height: 85vh;

    padding: 26px 22px 22px;

    overflow-y: auto;

    border-radius: 18px;

    border:
        1px solid
        var(--team-primary);

    background:
        linear-gradient(
            145deg,
            #151515,
            #0c0c0c
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.90),
        0 0 35px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        );
}


/* OCULTO */

#profileIconMenu.hidden {
    display: none !important;
}


/* =========================================
   X DE CERRAR
========================================= */

#profileIconMenu .profile-icon-close {
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    z-index: 30001;

    width: 36px;
    height: 36px;

    padding: 0;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius: 50%;

    background: #202020;

    color: #ffffff;

    font-size: 26px;
    line-height: 1;

    cursor: pointer;
}


#profileIconMenu .profile-icon-close:hover {
    color: var(--team-primary);

    border-color:
        var(--team-primary);
}


/* DEJAR ESPACIO PARA LA X */

#profileIconMenu .icon-popover-title {
    padding:
        0 45px;

    text-align: center;
}

/* =========================================
   OVERLAY SELECTOR DE ICONOS
========================================= */

.profile-icon-modal-overlay {
    position: fixed;
    inset: 0;

    z-index: 29999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.profile-icon-modal-overlay.hidden {
    display: none !important;
}


/* =========================================
   CUADRO SELECTOR DE ICONOS
========================================= */

.profile-icon-modal-overlay .profile-icon-popover {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;

    width: min(520px, 92vw);
    max-height: 85vh;

    padding: 26px 22px 22px;

    overflow-y: auto;

    border-radius: 18px;

    border: 1px solid var(--team-primary);

    background:
        linear-gradient(
            145deg,
            #151515,
            #0c0c0c
        );

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.85),
        0 0 30px
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        );
}


/* =========================================
   X DE CERRAR - SIN CÍRCULO
========================================= */

.profile-icon-modal-overlay .profile-icon-close {
    position: absolute !important;

    top: 12px !important;
    right: 15px !important;

    z-index: 10;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #888888;

    font-size: 28px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}

.profile-icon-modal-overlay .profile-icon-close:hover {
    color: #ffffff;

    background: transparent !important;

    border: 0 !important;

    transform: scale(1.08);
}


/* ESPACIO PARA LA X */

.profile-icon-modal-overlay .icon-popover-title {
    padding-left: 42px;
    padding-right: 42px;
}

/* =========================================
   X DE CERRAR - MISMO ESTILO QUE LOS DEMÁS
========================================= */

.profile-icon-modal-overlay .profile-icon-close {
    position: absolute !important;

    top: 12px !important;
    right: 15px !important;

    z-index: 10;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #888888 !important;

    font-size: 28px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


.profile-icon-modal-overlay .profile-icon-close:hover {
    color: #ffffff !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none;
}

/* =========================================
   X DE CERRAR - SIN EFECTOS
========================================= */

.profile-icon-modal-overlay .profile-icon-close {
    position: absolute !important;

    top: 12px !important;
    right: 15px !important;

    z-index: 10;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #888888 !important;

    font-size: 28px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    transition: none !important;
}


/* SIN EFECTO AL PASAR EL CURSOR */

.profile-icon-modal-overlay .profile-icon-close:hover,
.profile-icon-modal-overlay .profile-icon-close:focus,
.profile-icon-modal-overlay .profile-icon-close:active {
    color: #888888 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;

    outline: none !important;

    filter: none !important;
}

/* =========================================
   NOTIFICACIONES - HEADER
========================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* CONTENEDOR */

.notification-wrapper {
    position: relative;
}


/* CAMPANITA */

.notification-button {
    position: relative;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;

    background: #151515;

    color: #ffffff;

    font-size: 19px;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}


.notification-button:hover {
    border-color: var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #151515
        );
}


/* =========================================
   CONTADOR DE NOTIFICACIONES
========================================= */

.notification-badge {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: var(--team-primary);

    color: #ffffff;

    border: 2px solid #101010;

    font-size: 10px;
    font-weight: 900;

    line-height: 1;
}


.notification-badge.hidden {
    display: none;
}

/* =========================================
   PANEL DE NOTIFICACIONES
========================================= */

.notification-panel {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: min(390px, 92vw);
    max-height: 520px;

    padding: 18px;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,0.12);

    background:
        linear-gradient(
            145deg,
            #151515,
            #0c0c0c
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,0.75);

    z-index: 20000;

    overflow: hidden;
}


.notification-panel.hidden {
    display: none !important;
}


/* =========================================
   CABECERA
========================================= */

.notification-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 14px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);
}


.notification-panel-header small {
    display: block;

    margin-bottom: 4px;

    color: var(--team-primary);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.notification-panel-header strong {
    font-size: 18px;
}


/* X */

.notification-close {
    border: 0;
    background: transparent;

    color: #888888;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    padding: 0;
}


/* =========================================
   LISTA
========================================= */

.notification-list {
    max-height: 420px;

    overflow-y: auto;

    margin-top: 12px;

    padding-right: 3px;
}


/* =========================================
   NOTIFICACIÓN
========================================= */

.notification-item {
    display: flex;

    gap: 12px;

    padding: 14px 8px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);
}


.notification-item:last-child {
    border-bottom: 0;
}


.notification-item-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #161616
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            transparent
        );

    font-size: 18px;
}


.notification-item-content {
    min-width: 0;
}


.notification-item-content strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 13px;
}


.notification-item-content p {
    margin: 0 0 7px;

    color: #b0b0b0;

    font-size: 11px;
    line-height: 1.45;
}


.notification-item-content small {
    color: #666666;

    font-size: 9px;
}


/* =========================================
   ESTADO DE CARGA
========================================= */

.notification-loading {
    padding: 28px 12px;

    text-align: center;

    color: #888888;

    font-size: 12px;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .notification-panel {
        position: fixed;

        top: 74px;
        left: 50%;
        right: auto;

        transform:
            translateX(-50%);

        width: 92vw;

        max-height: 70vh;
    }

    .notification-list {
        max-height:
            calc(70vh - 90px);
    }
}

/* =========================================
   NOTIFICACIONES NUEVAS / NO LEÍDAS
========================================= */

.notification-item.unread {
    position: relative;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            transparent
        );

    border-radius: 12px;
}


/* BARRA LATERAL DE NOTIFICACIÓN NUEVA */

.notification-item.unread::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 3px;

    border-radius: 10px;

    background: var(--team-primary);
}

.notification-item {
    cursor: pointer;
}

/* =========================================
   SETUPS - SECCIONES SEGMENTADAS
========================================= */

.setup-values {
    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 18px;
}


/* CADA SEGMENTO */

.setup-section {
    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.018);
}


/* TÍTULO DE CADA SEGMENTO */

.setup-section-title {
    padding: 10px 14px;

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            #111111
        );

    color:
        var(--team-primary);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.12em;
}


/* CONTENIDO DEL SEGMENTO */

.setup-section-values {
    padding: 4px 12px;
}


/* FILAS */

.setup-section .setup-value-row {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}


.setup-section .setup-value-row:last-child {
    border-bottom: 0;
}


/* NOMBRE DEL VALOR */

.setup-section .setup-value-row span {
    color: #a8a8a8;

    font-size: 11px;
}


/* VALOR */

.setup-section .setup-value-row strong {
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

/* =========================================
   BUSCADOR DE USUARIOS ADMIN
========================================= */

.users-search-bar {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto
        46px;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    padding: 14px;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        linear-gradient(
            145deg,
            #141414,
            #0d0d0d
        );
}


/* CAMPO */

.users-search-bar .profile-input {
    width: 100%;
    height: 46px;

    margin: 0;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 11px;

    background: #0b0b0b;

    color: #ffffff;

    outline: none;
}


.users-search-bar .profile-input:focus {
    border-color:
        var(--team-primary);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );
}


/* BOTÓN BUSCAR */

.users-search-button {
    height: 46px;

    padding: 0 22px;

    border: 0;
    border-radius: 11px;

    background:
        var(--team-primary);

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.06em;

    cursor: pointer;
}


/* REFRESCAR */

.users-refresh-button {
    width: 46px;
    height: 46px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 11px;

    background: #181818;

    color: #ffffff;

    font-size: 24px;

    cursor: pointer;
}


/* MÓVIL */

@media (max-width: 1100px) {

    .users-search-bar {
        grid-template-columns:
            1fr
            auto;
    }


    .users-search-bar .profile-input {
        grid-column:
            1 / -1;
    }
}

/* =========================================
   NOTICIAS F1 25
========================================= */

.game-updates-container {
    margin-top: 24px;
}


/* TARJETA PRINCIPAL */

.game-update-card {
    padding: 28px;

    border-radius: 20px;

    border:
        1px solid rgba(255,255,255,0.10);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                #151515
            ),
            #0c0c0c
        );

    box-shadow:
        0 25px 80px rgba(0,0,0,0.35);
}


/* PARTE SUPERIOR */

.game-update-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.game-update-top small {
    display: block;

    margin-bottom: 7px;

    color: var(--team-primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.14em;
}


.game-update-top h2 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;
}


/* BADGE EA */

.game-update-badge {
    padding: 7px 11px;

    border-radius: 999px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 50%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        );

    color: var(--team-primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.08em;

    white-space: nowrap;
}


/* FECHA */

.game-update-date {
    margin-bottom: 20px;

    color: #888888;

    font-size: 11px;
}


/* TÍTULO */

.game-update-card h3 {
    margin:
        0
        0
        12px;

    color: #ffffff;

    font-size: 20px;
    line-height: 1.35;
}


/* DESCRIPCIÓN */

.game-update-description {
    max-width: 700px;

    margin: 0;

    color: #aaaaaa;

    font-size: 12px;
    line-height: 1.6;
}


/* FOOTER */

.game-update-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 26px;
    padding-top: 18px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.game-update-footer span {
    color: #888888;

    font-size: 10px;
}


/* BOTÓN EA */

.game-update-link {
    min-height: 42px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        var(--team-primary);

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.06em;

    transition:
        filter 0.18s ease,
        transform 0.18s ease;
}


.game-update-link:hover {
    filter: brightness(1.08);

    transform: translateY(-1px);
}


/* CARGANDO */

.game-updates-loading {
    padding: 35px;

    text-align: center;

    color: #888888;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .game-update-card {
        padding: 22px;
    }


    .game-update-top {
        flex-direction: column;
    }


    .game-update-top h2 {
        font-size: 24px;
    }


    .game-update-footer {
        flex-direction: column;

        align-items: stretch;
    }


    .game-update-link {
        width: 100%;
    }
}

/* =========================================
   ENCABEZADO - NOTICIAS F1 25
========================================= */

.game-updates-heading {
    margin-bottom: 28px;
}


.game-updates-heading h1 {
    margin:
        4px
        0
        10px;

    line-height: 1.15;
}


.game-updates-subtitle {
    margin: 0;

    color: #8f8f8f;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.5;
}


.game-updates-container {
    margin-top: 0;
}

/* =========================================
   NOTICIAS F1 25 - DISEÑO FINAL
========================================= */

.game-update-card {
    overflow: hidden;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0;

    border-radius: 20px;

    border:
        1px solid rgba(255,255,255,0.10);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #151515
            ),
            #0c0c0c
        );
}


/* =========================================
   IMAGEN PRINCIPAL
========================================= */

.game-update-image {
    width: 100%;

    max-height: 360px;

    overflow: hidden;

    background: #090909;
}


.game-update-image img {
    width: 100%;
    height: 100%;

    max-height: 360px;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================
   CONTENIDO
========================================= */

.game-update-content {
    padding: 26px;
}


/* =========================================
   CABECERA
========================================= */

.game-update-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 12px;
}


.game-update-top h2 {
    margin: 4px 0 0;

    font-size: 25px;

    line-height: 1.15;
}


.game-update-top small {
    font-size: 9px;

    color: var(--team-primary);

    font-weight: 900;

    letter-spacing: 0.12em;
}


/* =========================================
   FECHA
========================================= */

.game-update-date {
    margin-bottom: 18px;

    color: #888888;

    font-size: 10px;
}


/* =========================================
   TÍTULO
========================================= */

.game-update-card h3 {
    margin:
        0
        0
        10px;

    max-width: 850px;

    font-size: 18px;

    line-height: 1.35;
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.game-update-description {
    max-width: 850px;

    margin: 0;

    color: #aaaaaa;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================
   DESTACADOS
========================================= */

.game-update-highlights {
    margin-top: 24px;

    padding: 18px;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.02);
}


.game-update-section-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: var(--team-primary);

    font-size: 12px;

    font-weight: 900;
}


.game-update-highlight-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.game-update-highlight-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 10px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}


.game-update-highlight-item:last-child {
    border-bottom: 0;
}


.game-update-highlight-item > span {
    flex: 0 0 auto;

    color: var(--team-primary);

    font-weight: 900;
}


.game-update-highlight-item p {
    margin: 0;

    color: #b0b0b0;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================
   GALERÍA
========================================= */

.game-update-gallery {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 22px;
}


.game-update-gallery-item {
    overflow: hidden;

    aspect-ratio: 16 / 9;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.08);

    background: #090909;
}


.game-update-gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.2s ease;
}


.game-update-gallery-item:hover img {
    transform: scale(1.02);
}


/* =========================================
   FOOTER
========================================= */

.game-update-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}


.game-update-footer span {
    color: #777777;

    font-size: 9px;
}


/* =========================================
   BOTÓN
========================================= */

.game-update-link {
    min-height: 40px;

    padding: 0 16px;

    border-radius: 10px;

    font-size: 9px;

    white-space: nowrap;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .game-update-content {
        padding: 20px;
    }


    .game-update-top {
        flex-direction: column;
    }


    .game-update-top h2 {
        font-size: 22px;
    }


    .game-update-card h3 {
        font-size: 16px;
    }


    .game-update-image,
    .game-update-image img {
        max-height: 240px;
    }


    .game-update-gallery {
        grid-template-columns:
            1fr;
    }


    .game-update-footer {
        flex-direction: column;

        align-items: stretch;
    }


    .game-update-link {
        width: 100%;
    }
}

/* =========================================
   DETALLES COMPLETOS DEL PARCHE
========================================= */

.game-update-sections {
    margin-top: 28px;
}


/* CABECERA */

.game-update-sections-header {
    margin-bottom: 16px;
}

.game-update-sections-header small {
    display: block;

    margin-bottom: 5px;

    color: var(--team-primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.game-update-sections-header h3 {
    margin: 0;

    font-size: 18px;
    font-weight: 800;
}


/* =========================================
   CADA SECCIÓN
========================================= */

.game-update-detail-section {
    margin-bottom: 12px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.025);
}


/* =========================================
   TÍTULO DE SECCIÓN
========================================= */

.game-update-detail-title {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 16px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            transparent
        );
}


.game-update-detail-title > span {
    font-size: 15px;
}


.game-update-detail-title strong {
    font-size: 12px;

    font-weight: 800;

    color: #ffffff;
}


.game-update-detail-title small {
    margin-left: auto;

    padding: 5px 9px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            transparent
        );

    color: var(--team-primary);

    font-size: 8px;

    font-weight: 800;

    white-space: nowrap;
}


/* =========================================
   LISTA DE CAMBIOS
========================================= */

.game-update-detail-items {
    padding: 4px 16px;
}


.game-update-detail-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(255,255,255,0.055);
}


.game-update-detail-item:last-child {
    border-bottom: 0;
}


.game-update-detail-item > span {
    flex: 0 0 auto;

    color: var(--team-primary);

    font-size: 16px;

    line-height: 1.2;
}


.game-update-detail-item p {
    margin: 0;

    color: #b5b5b5;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================
   DESTACADOS
========================================= */

.game-update-highlights {
    margin-top: 24px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 4%,
            #111111
        );
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .game-update-detail-title {
        min-height: 44px;

        padding: 0 12px;
    }


    .game-update-detail-items {
        padding: 2px 12px;
    }


    .game-update-detail-item {
        padding: 10px 0;
    }


    .game-update-detail-item p {
        font-size: 10px;
    }
}

/* =========================================
   CALCULADORA DE IA F1 26
========================================= */

.ai-calculator-page {
    max-width: 900px;
    margin: 0 auto;
}


/* CABECERA */

.ai-calculator-header {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 24px;
}

.ai-calculator-header-icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #111111
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );

    font-size: 25px;
}

.ai-calculator-header small {
    display: block;

    margin-bottom: 4px;

    color: var(--team-primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.14em;
}

.ai-calculator-header h1 {
    margin: 0 0 6px;

    font-size: 28px;
}

.ai-calculator-header p {
    margin: 0;

    color: #9a9a9a;

    font-size: 12px;

    line-height: 1.5;
}


/* TARJETA PRINCIPAL */

.ai-calculator-card {
    padding: 24px;

    border-radius: 20px;

    border:
        1px solid rgba(255,255,255,0.09);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #151515
            ),
            #0c0c0c
        );
}


/* CABECERA INTERNA */

.ai-calculator-card-header {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;
}

.ai-calculator-card-header > span {
    font-size: 22px;
}

.ai-calculator-card-header small {
    display: block;

    margin-bottom: 3px;

    color: var(--team-primary);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.12em;
}

.ai-calculator-card-header h2 {
    margin: 0;

    font-size: 18px;
}


/* CAMPOS */

.ai-calculator-field {
    margin-top: 18px;
}

.ai-calculator-field label {
    display: block;

    margin-bottom: 8px;

    color: #cfcfcf;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.05em;
}


/* SELECT */

.ai-calculator-field .race-select {
    width: 100%;
    height: 46px;

    border-radius: 11px;

    border:
        1px solid rgba(255,255,255,0.12);

    background: #0c0c0c;

    color: #ffffff;

    padding: 0 12px;
}


/* TIEMPO */

.ai-laptime-inputs {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 10px;
}

.ai-time-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-time-input input {
    width: 100%;
    height: 54px;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.12);

    background: #090909;

    color: #ffffff;

    text-align: center;

    font-size: 22px;
    font-weight: 800;

    outline: none;
}

.ai-time-input input:focus {
    border-color:
        var(--team-primary);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );
}

.ai-time-input small {
    text-align: center;

    color: #666666;

    font-size: 8px;

    letter-spacing: 0.08em;
}

.ai-time-separator {
    margin-top: -14px;

    color: #777777;

    font-size: 24px;
    font-weight: 800;
}


/* BOTÓN */

.ai-calculator-button {
    width: 100%;
    height: 50px;

    margin-top: 22px;

    border: 0;
    border-radius: 12px;

    background: var(--team-primary);

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.06em;

    cursor: pointer;
}

.ai-calculator-button:hover {
    filter: brightness(1.08);
}


/* ESTADO */

.ai-calculator-status {
    margin-top: 14px;

    padding: 12px;

    border-radius: 10px;

    background: rgba(255,255,255,0.03);

    color: #999999;

    font-size: 11px;

    text-align: center;
}

.ai-calculator-status.hidden {
    display: none;
}


/* RESULTADO */

.ai-calculator-result {
    margin-top: 20px;

    padding: 24px;

    border-radius: 20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            #111111
        );
}

.ai-calculator-result.hidden {
    display: none;
}


/* INFO */

.ai-calculator-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 18px;

    padding: 14px 16px;

    border-radius: 12px;

    border:
        1px solid rgba(255,255,255,0.07);

    background: rgba(255,255,255,0.02);
}

.ai-calculator-info p {
    margin: 0;

    color: #888888;

    font-size: 10px;

    line-height: 1.5;
}


/* MÓVIL */

@media (max-width: 1100px) {

    .ai-calculator-header {
        align-items: flex-start;
    }

    .ai-calculator-header h1 {
        font-size: 23px;
    }

    .ai-calculator-card {
        padding: 18px;
    }

    .ai-laptime-inputs {
        gap: 7px;
    }

    .ai-time-input input {
        height: 50px;

        font-size: 18px;
    }

    .ai-time-separator {
        font-size: 20px;
    }
}

/* =========================================
   RESULTADO - CALCULADORA IA
========================================= */

.ai-result-card {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================================
   NIVEL PRINCIPAL
========================================= */

.ai-result-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 24px;

    border-radius: 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                #121212
            ),
            #0b0b0b
        );

    text-align: center;
}


.ai-result-main-label {
    color: var(--team-primary);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.14em;
}


.ai-result-main-number {
    margin-top: 8px;

    color: #ffffff;

    font-size: 72px;
    font-weight: 900;

    line-height: 1;
}


.ai-result-main-range {
    margin-top: 10px;

    color: #8e8e8e;

    font-size: 11px;
}


.ai-result-main-range strong {
    color: #ffffff;
}


/* =========================================
   DATOS
========================================= */

.ai-result-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


.ai-result-box {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-height: 92px;

    padding: 16px;

    border-radius: 14px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.025);
}


.ai-result-box span {
    color: #888888;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.04em;
}


.ai-result-box strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
}


/* =========================================
   RECOMENDACIÓN
========================================= */

.ai-result-recommendation {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 18px;

    border-radius: 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            rgba(255,255,255,0.07)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            #101010
        );
}


.ai-result-recommendation-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #151515
        );

    font-size: 18px;
}


.ai-result-recommendation small {
    display: block;

    margin-bottom: 6px;

    color: var(--team-primary);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.12em;
}


.ai-result-recommendation p {
    margin: 0;

    color: #a7a7a7;

    font-size: 11px;

    line-height: 1.55;
}


.ai-result-recommendation p strong {
    color: #ffffff;
}


/* =========================================
   CONTENEDOR GENERAL
========================================= */

.ai-calculator-result {
    margin-top: 20px;

    padding: 20px;

    border-radius: 20px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        #0d0d0d;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .ai-result-main {
        min-height: 160px;
    }


    .ai-result-main-number {
        font-size: 58px;
    }


    .ai-result-grid {
        grid-template-columns: 1fr;
    }


    .ai-result-box {
        min-height: auto;
    }
}

/* =========================================
   RESALTAR PARÁMETROS MODIFICADOS
========================================= */

.setup-value-row.notification-highlight {
    position: relative;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 16%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            transparent
        );

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        ),
        0 0 22px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        );

    padding-left: 10px;
    padding-right: 10px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.setup-value-row.notification-highlight span {
    color: #ffffff;
}


.setup-value-row.notification-highlight strong {
    color: var(--team-primary);
}

/* =========================================
   ACTUALIZACIONES DE LA APP
========================================= */

.app-updates-heading {
    margin-bottom: 26px;
}

.app-updates-heading h1 {
    margin:
        4px
        0
        10px;

    line-height: 1.15;
}

.app-updates-subtitle {
    margin: 0;

    color: #8f8f8f;

    font-size: 12px;

    line-height: 1.5;
}

.app-updates-container {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.app-updates-loading {
    padding: 32px;

    text-align: center;

    color: #888888;
}


/* =========================================
   TARJETA DE UPDATE
========================================= */

.app-update-card {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        34px;

    align-items: center;

    gap: 14px;

    padding: 18px;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #151515
            ),
            #0c0c0c
        );

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.app-update-card:hover {
    transform:
        translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            rgba(255,255,255,0.08)
        );
}


/* ICONO */

.app-update-card-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #111111
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        );

    font-size: 22px;
}


/* CONTENIDO */

.app-update-card-content small {
    display: block;

    margin-bottom: 4px;

    color:
        var(--team-primary);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.app-update-card-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.25;
}

.app-update-card-content p {
    margin:
        7px
        0
        0;

    color: #919191;

    font-size: 11px;

    line-height: 1.5;
}


/* FLECHA */

.app-update-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--team-primary);

    font-size: 20px;

    font-weight: 900;
}


/* =========================================
   MODAL
========================================= */

.app-update-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.app-update-modal.hidden {
    display: none;
}


/* FONDO OSCURO */

.app-update-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,0.72);

    backdrop-filter:
        blur(6px);
}


/* TARJETA FLOTANTE */

.app-update-modal-card {
    position: relative;

    z-index: 1;

    width: min(
        720px,
        100%
    );

    max-height:
        calc(100vh - 48px);

    overflow-y: auto;

    border-radius: 20px;

    border:
        1px solid rgba(255,255,255,0.10);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #161616
            ),
            #0b0b0b
        );

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.55);
}


/* BOTÓN CERRAR */

.app-update-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.06);

    color: #ffffff;

    font-size: 22px;

    cursor: pointer;

    z-index: 2;
}

.app-update-modal-close:hover {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            rgba(255,255,255,0.06)
        );
}


/* CONTENIDO MODAL */

.app-update-modal-content {
    padding: 30px;
}


/* HEADER DEL MODAL */

.app-update-modal-header {
    padding-right: 50px;

    margin-bottom: 20px;
}

.app-update-modal-header small {
    display: block;

    margin-bottom: 5px;

    color:
        var(--team-primary);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.14em;
}

.app-update-modal-header h2 {
    margin: 0;

    color: #ffffff;

    font-size: 28px;
}

.app-update-modal-date {
    margin-top: 7px;

    color: #777777;

    font-size: 10px;
}


/* TÍTULO Y RESUMEN */

.app-update-modal-main-title {
    margin:
        0
        0
        8px;

    color: #ffffff;

    font-size: 17px;
}

.app-update-modal-summary {
    margin:
        0
        0
        22px;

    color: #9a9a9a;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================
   SECCIONES DEL UPDATE
========================================= */

.app-update-modal-section {
    margin-top: 14px;

    overflow: hidden;

    border-radius: 14px;

    border:
        1px solid rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.02);
}

.app-update-modal-section-title {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding:
        0
        16px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            transparent
        );
}

.app-update-modal-section-title span {
    font-size: 15px;
}

.app-update-modal-section-title strong {
    color: #ffffff;

    font-size: 11px;

    font-weight: 800;
}


/* ITEMS */

.app-update-modal-items {
    padding:
        4px
        16px;
}

.app-update-modal-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding:
        11px
        0;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.app-update-modal-item:last-child {
    border-bottom: 0;
}

.app-update-modal-item > span {
    flex: 0 0 auto;

    color:
        var(--team-primary);

    font-weight: 900;
}

.app-update-modal-item p {
    margin: 0;

    color: #b0b0b0;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================
   BLOQUEAR SCROLL DEL BODY
========================================= */

body.modal-open {
    overflow: hidden;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .app-update-card {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            24px;

        padding: 14px;
    }

    .app-update-card-icon {
        width: 44px;
        height: 44px;

        font-size: 18px;
    }

    .app-update-card-content h2 {
        font-size: 14px;
    }

    .app-update-modal {
        padding: 14px;
    }

    .app-update-modal-content {
        padding: 22px;
    }

    .app-update-modal-header h2 {
        font-size: 23px;
    }

    .app-update-modal-item p {
        font-size: 10px;
    }
}

/* =========================================
   ADMIN - ESTILO GENERAL DINÁMICO
========================================= */

#page-admin {
    --admin-accent:
        var(--team-primary);
}


/* =========================================
   CABECERA GENERAL DE ADMIN
========================================= */

#page-admin .page-header {
    position: relative;

    padding:
        22px
        24px;

    margin-bottom: 24px;

    border-radius: 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--admin-accent) 22%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--admin-accent) 8%,
                #121212
            ),
            #0b0b0b
        );

    box-shadow:
        0 18px 50px
        rgba(0,0,0,0.28);

    overflow: hidden;
}


#page-admin .page-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--admin-accent);
}


#page-admin .page-header .header-small {
    color:
        var(--admin-accent);

    font-weight: 900;

    letter-spacing: 0.18em;
}


#page-admin .page-header h1 {
    margin:
        4px
        0
        6px;

    font-size: 28px;

    color: #ffffff;
}


#page-admin .page-header .page-subtitle {
    color: #8d8d8d;
}


/* =========================================
   BADGE ADMIN
========================================= */

#page-admin .admin-badge {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--admin-accent) 70%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--admin-accent) 12%,
            transparent
        );

    color:
        var(--admin-accent);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--admin-accent) 12%,
            transparent
        );
}


/* =========================================
   DASHBOARD DE ADMIN
========================================= */

.admin-dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 16px;
}


.admin-module-card {
    position: relative;

    min-height: 150px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 14px;

    padding: 20px;

    border-radius: 18px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--admin-accent) 5%,
                #151515
            ),
            #0c0c0c
        );

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


.admin-module-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--admin-accent);

    opacity: 0;

    transition:
        opacity 0.18s ease;
}


.admin-module-card:hover {
    transform:
        translateY(-3px);

    border-color:
        color-mix(
            in srgb,
            var(--admin-accent) 40%,
            rgba(255,255,255,0.08)
        );

    box-shadow:
        0 18px 40px
        color-mix(
            in srgb,
            var(--admin-accent) 9%,
            rgba(0,0,0,0.4)
        );
}


.admin-module-card:hover::before {
    opacity: 1;
}


.admin-module-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--admin-accent) 12%,
            #111111
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--admin-accent) 22%,
            transparent
        );

    font-size: 21px;
}


.admin-module-card strong {
    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-size: 16px;
}


.admin-module-card p {
    margin: 0;

    color: #8d8d8d;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================
   CABECERA DE CADA MÓDULO
========================================= */

.admin-section-toolbar {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding:
        18px
        20px;

    margin-bottom: 18px;

    border-radius: 16px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--admin-accent) 18%,
            rgba(255,255,255,0.07)
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--admin-accent) 5%,
                #131313
            ),
            #0c0c0c
        );
}


.admin-section-toolbar .header-small {
    color:
        var(--admin-accent);

    font-weight: 900;

    letter-spacing: 0.16em;
}


.admin-section-toolbar h2 {
    margin:
        4px
        0
        5px;

    color: #ffffff;

    font-size: 21px;
}


.admin-section-toolbar .page-subtitle {
    margin: 0;

    color: #888888;
}


/* =========================================
   BOTÓN VOLVER
========================================= */

.admin-section-toolbar .secondary-button {
    flex: 0 0 auto;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--admin-accent) 22%,
            rgba(255,255,255,0.10)
        );

    background:
        rgba(255,255,255,0.025);

    color: #ffffff;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}


.admin-section-toolbar .secondary-button:hover {
    background:
        color-mix(
            in srgb,
            var(--admin-accent) 10%,
            #111111
        );

    border-color:
        var(--admin-accent);

    color:
        var(--admin-accent);
}


/* =========================================
   PANELES INTERNOS
========================================= */

#page-admin .detail-panel {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--admin-accent) 10%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            145deg,
            #121212,
            #0d0d0d
        );

    box-shadow:
        0 16px 40px
        rgba(0,0,0,0.20);
}


/* =========================================
   INPUTS / SELECTS / TEXTAREAS
========================================= */

#page-admin input,
#page-admin select,
#page-admin textarea {
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


#page-admin input:focus,
#page-admin select:focus,
#page-admin textarea:focus {
    outline: none;

    border-color:
        var(--admin-accent);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--admin-accent) 14%,
            transparent
        );
}


/* =========================================
   BOTONES PRINCIPALES
========================================= */

#page-admin .main-button,
#page-admin .strategy-save-button,
#page-admin .users-search-button,
#page-admin .admin-new-update-button {
    border: 0;

    background:
        var(--admin-accent);

    color: #ffffff;

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--admin-accent) 16%,
            transparent
        );

    transition:
        transform 0.16s ease,
        filter 0.16s ease,
        box-shadow 0.16s ease;
}


#page-admin .main-button:hover,
#page-admin .strategy-save-button:hover,
#page-admin .users-search-button:hover,
#page-admin .admin-new-update-button:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.08);

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--admin-accent) 22%,
            transparent
        );
}


/* =========================================
   MENSAJES DE ADMIN
========================================= */

#page-admin .admin-message {
    color:
        var(--admin-accent);

    font-weight: 700;
}


/* =========================================
   ESTRATEGIAS
========================================= */

#adminSectionStrategies
.strategy-editor-textarea {
    min-height: 260px;

    border-radius: 14px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    background:
        #090909;

    color:
        #ffffff;

    padding: 16px;

    line-height: 1.6;
}


#adminSectionStrategies
.strategy-editor-textarea:focus {
    border-color:
        var(--admin-accent);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--admin-accent) 14%,
            transparent
        );
}


/* =========================================
   ACTUALIZACIONES
========================================= */

#adminSectionUpdates
.admin-updates-panel {
    position: relative;

    overflow: hidden;
}


#adminSectionUpdates
.admin-updates-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        var(--admin-accent);
}


/* =========================================
   USUARIOS
========================================= */

#adminSectionUsers
.users-search-bar {
    padding:
        14px;

    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--admin-accent) 3%,
            #0d0d0d
        );

    border:
        1px solid
        rgba(255,255,255,0.06);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .admin-dashboard-grid {
        grid-template-columns:
            1fr;
    }


    .admin-section-toolbar {
        flex-direction: column;
    }


    .admin-section-toolbar
    .secondary-button {
        width: 100%;
    }


    #page-admin .page-header {
        padding: 18px;
    }
}

/* =========================================
   NOTICIAS F1 - AUMENTAR TAMAÑO DE TEXTO
========================================= */

/* Títulos de categorías */
.f1-news-category h3,
.f1-news-category strong {
    font-size: 17px !important;
}

/* Texto de cada cambio */
.f1-news-category li,
.f1-news-category li p {
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* Si las notas utilizan otro contenedor */
.f1-news-card li,
.f1-news-card li p,
.patch-notes-card li,
.patch-notes-card li p {
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* Contadores: "3 cambios", "5 cambios", etc. */
.f1-news-category .badge,
.patch-notes-card .badge {
    font-size: 12px !important;
}

/* Información inferior */
.f1-news-source,
.patch-notes-source {
    font-size: 12px !important;
}

/* Botón EA */
.f1-news-card .main-button,
.patch-notes-card .main-button {
    font-size: 13px !important;
}

/* =========================================
   NOTICIAS F1 25 - TIPOGRAFÍA MÁS GRANDE
========================================= */

/* Texto general */
#page-news {
    font-size: 16px !important;
}

/* Título principal: Noticias F1 25 */
#page-news h1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
}

/* Títulos grandes como F1 25 · v1.24 */
#page-news h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
}

/* Títulos de secciones */
#page-news h3 {
    font-size: 19px !important;
    line-height: 1.4 !important;
}

/* TODOS los párrafos */
#page-news p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Listas de cambios */
#page-news li {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Texto dentro de listas */
#page-news li p,
#page-news li span {
    font-size: 15px !important;
    line-height: 1.7 !important;
}

/* Textos pequeños */
#page-news small {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Etiquetas / categorías */
#page-news .header-small {
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* Botones */
#page-news button,
#page-news a {
    font-size: 14px !important;
}

/* Badges: 3 cambios, 4 cambios, etc. */
#page-news .badge {
    font-size: 12px !important;
}

/* =========================================
   NOTICIAS F1 25 - TIPOGRAFÍA MÁS GRANDE
========================================= */

/* Título principal */
#page-game-updates .game-updates-heading h1 {
    font-size: 38px !important;
    line-height: 1.15 !important;
}

/* EA SPORTS F1 25 */
#page-game-updates .header-small {
    font-size: 14px !important;
    letter-spacing: 4px !important;
}

/* Subtítulo debajo de Noticias F1 25 */
#page-game-updates .game-updates-subtitle {
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* =========================================
   CONTENIDO DE LAS NOTICIAS
========================================= */

/* Tamaño general */
#page-game-updates .game-updates-container {
    font-size: 16px !important;
}


/* TODOS LOS PÁRRAFOS */

#page-game-updates .game-updates-container p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* TODOS LOS ELEMENTOS DE LISTAS */

#page-game-updates .game-updates-container li {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* SPAN dentro de noticias */

#page-game-updates .game-updates-container span {
    font-size: 15px;
}


/* =========================================
   TÍTULOS
========================================= */

/* F1 25 · v1.24 */
#page-game-updates .game-updates-container h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
}


/* Títulos secundarios */
#page-game-updates .game-updates-container h3 {
    font-size: 21px !important;
    line-height: 1.4 !important;
}


/* Títulos pequeños de categorías */
#page-game-updates .game-updates-container h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}


/* =========================================
   TEXTOS PEQUEÑOS
========================================= */

#page-game-updates .game-updates-container small {
    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* =========================================
   BOTONES Y ENLACES
========================================= */

#page-game-updates .game-updates-container button {
    font-size: 14px !important;
    font-weight: 800 !important;
}


#page-game-updates .game-updates-container a {
    font-size: 14px;
}


/* =========================================
   MEJOR SEPARACIÓN DE LOS CAMBIOS
========================================= */

#page-game-updates .game-updates-container li {
    padding-top: 10px;
    padding-bottom: 10px;
}


/* =========================================
   MÓVILES
========================================= */

@media (max-width: 1100px) {

    #page-game-updates .game-updates-heading h1 {
        font-size: 30px !important;
    }

    #page-game-updates .game-updates-container p,
    #page-game-updates .game-updates-container li {
        font-size: 15px !important;
    }

    #page-game-updates .game-updates-container h2 {
        font-size: 25px !important;
    }

    #page-game-updates .game-updates-container h3 {
        font-size: 19px !important;
    }
}

/* =========================================
   PERFIL - REDISEÑO VISUAL
========================================= */

/* Tarjeta principal */
#page-profile .profile-card {
    position: relative;
    overflow: hidden;

    padding: 48px 36px;

    border-radius: 22px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            rgba(255,255,255,0.10)
        );

    background:
        radial-gradient(
            circle at 50% 0%,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                transparent
            ),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #141414,
            #0c0c0c
        );

    box-shadow:
        0 24px 60px
        rgba(0,0,0,0.30);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Línea superior con color de escudería */
#page-profile .profile-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 3px;

    border-radius: 0 0 10px 10px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 24px
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
}


/* =========================================
   AVATAR
========================================= */

#page-profile .profile-avatar {
    width: 96px;
    height: 96px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0 auto
        18px;

    border-radius: 50%;

    border: 2px solid
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            rgba(255,255,255,0.20)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 12%,
                #1b1b1b
            ),
            #101010
        );

    color: #ffffff;

    font-size: 32px;
    font-weight: 800;

    box-shadow:
        0 0 0 6px
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            transparent
        ),
        0 15px 35px
        rgba(0,0,0,0.30);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#page-profile .profile-avatar:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--team-primary);

    box-shadow:
        0 0 0 7px
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            transparent
        ),
        0 0 30px
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            transparent
        );
}


/* =========================================
   INFORMACIÓN DEL USUARIO
========================================= */

#page-profile .profile-card h2 {
    margin:
        0 0
        6px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 850;

    letter-spacing: -0.02em;
}


#page-profile .profile-username {
    color:
        var(--team-primary) !important;

    font-size: 17px !important;
    font-weight: 700;

    margin-bottom: 8px;
}


#page-profile .profile-email {
    color: #9a9a9a;

    font-size: 15px;

    margin-bottom: 26px;
}


/* =========================================
   BADGE ADMINISTRADOR
========================================= */

#page-profile .admin-badge,
#page-profile .profile-badge {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 65%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        ) !important;

    color:
        var(--team-primary) !important;

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            transparent
        );
}


/* =========================================
   BOTÓN EDITAR PERFIL
========================================= */

#page-profile .secondary-button {
    position: relative;

    min-height: 48px;

    padding:
        0 22px;

    border-radius: 12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            rgba(255,255,255,0.15)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 3%,
            #171717
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* AQUÍ ESTÁ EL CAMBIO QUE QUIERES */

#page-profile .secondary-button:hover {
    background:
        var(--team-primary) !important;

    border-color:
        var(--team-primary) !important;

    color: #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            transparent
        );
}


#page-profile .secondary-button:active {
    transform:
        translateY(0)
        scale(0.98);
}


/* =========================================
   ACCIONES DEL PERFIL
========================================= */

#page-profile .profile-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 26px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    #page-profile .profile-card {
        padding:
            36px
            20px;
    }

    #page-profile .profile-avatar {
        width: 82px;
        height: 82px;

        font-size: 28px;
    }

    #page-profile .profile-card h2 {
        font-size: 24px;
    }

    #page-profile .profile-actions {
        flex-direction: column;
    }

    #page-profile .profile-actions .secondary-button {
        width: 100%;
    }
}

/* =========================================
   BOTÓN EDITAR PERFIL - COLOR ESCUDERÍA
========================================= */

#page-profile .profile-edit-main-button {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,0.15)
        );

    background:
        #171717;

    color:
        #ffffff;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#page-profile .profile-edit-main-button:hover {
    background:
        var(--team-primary) !important;

    border-color:
        var(--team-primary) !important;

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 28px
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );

    cursor:
        pointer;
}


#page-profile .profile-edit-main-button:active {
    transform:
        translateY(0)
        scale(0.98);
}

/* =========================================
   EDITAR PERFIL - MISMO HOVER QUE PERFIL
========================================= */

#page-profile .profile-edit-main-button {
    background: transparent !important;

    border: 1px solid var(--team-primary) !important;

    color: #ffffff !important;

    border-radius: 12px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* AL PASAR EL CURSOR */

#page-profile .profile-edit-main-button:hover {
    background: var(--team-primary) !important;

    border-color: var(--team-primary) !important;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
}


/* AL HACER CLICK */

#page-profile .profile-edit-main-button:active {
    transform: translateY(0);
}

/* =========================================
   EDITAR PERFIL - HOVER ELEGANTE
========================================= */

#page-profile .profile-edit-main-button {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 4%,
            #151515
        ) !important;

    border:
        1px solid
        var(--team-primary) !important;

    color:
        #ffffff !important;

    border-radius:
        12px;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* AL PASAR EL CURSOR */

#page-profile .profile-edit-main-button:hover {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #151515
        ) !important;

    border-color:
        var(--team-primary) !important;

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            transparent
        ),
        0 8px 24px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        ) !important;
}


/* AL HACER CLICK */

#page-profile .profile-edit-main-button:active {
    transform:
        translateY(0)
        scale(0.98);
}

/* =========================================
   DETALLE DE ACTUALIZACIONES
   AUMENTAR TAMAÑO DE LETRAS
========================================= */

/* Contenido general del modal */
.update-detail-modal,
.update-detail-content {
    font-size: 16px !important;
}


/* =========================================
   TÍTULO PRINCIPAL
   Update V1.4
========================================= */

.update-detail-modal h1,
.update-detail-content h1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}


/* =========================================
   TÍTULO DEL UPDATE
   Estrategias, diseño dinámico...
========================================= */

.update-detail-modal h2,
.update-detail-content h2 {
    font-size: 23px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}


/* =========================================
   RESUMEN
========================================= */

.update-detail-modal p,
.update-detail-content p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* =========================================
   TÍTULOS DE SECCIONES
   NUEVAS FUNCIONES / MEJORAS / CORRECCIONES
========================================= */

.update-detail-modal h3,
.update-detail-content h3 {
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}


/* =========================================
   CADA CAMBIO DE LA LISTA
========================================= */

.update-detail-modal li,
.update-detail-content li {
    font-size: 15px !important;
    line-height: 1.65 !important;

    padding-top: 11px !important;
    padding-bottom: 11px !important;
}


/* Texto dentro de cada cambio */
.update-detail-modal li span,
.update-detail-content li span,
.update-detail-modal li p,
.update-detail-content li p {
    font-size: 15px !important;
    line-height: 1.65 !important;
}


/* =========================================
   FECHA Y TEXTOS PEQUEÑOS
========================================= */

.update-detail-modal small,
.update-detail-content small {
    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* =========================================
   ICONOS DE CADA CAMBIO
========================================= */

.update-detail-modal li::marker,
.update-detail-content li::marker {
    font-size: 17px !important;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .update-detail-modal h1,
    .update-detail-content h1 {
        font-size: 28px !important;
    }

    .update-detail-modal h2,
    .update-detail-content h2 {
        font-size: 20px !important;
    }

    .update-detail-modal p,
    .update-detail-content p,
    .update-detail-modal li,
    .update-detail-content li {
        font-size: 14px !important;
    }
}

/* =========================================
   MODAL DE ACTUALIZACIONES
   AUMENTAR TAMAÑO DE TEXTO
========================================= */

/* Título Update V1.4 */
#appUpdateModal .app-update-modal-header h2 {
    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}


/* CHAVITOXO SETUPS */
#appUpdateModal .app-update-modal-header small {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
}


/* Fecha */
#appUpdateModal .app-update-modal-date {
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* Título del Update */
#appUpdateModal .app-update-modal-main-title {
    font-size: 23px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;

    margin-bottom: 10px !important;
}


/* Resumen */
#appUpdateModal .app-update-modal-summary {
    font-size: 16px !important;
    line-height: 1.7 !important;

    margin-bottom: 26px !important;
}


/* =========================================
   NUEVAS FUNCIONES / MEJORAS / CORRECCIONES
========================================= */

#appUpdateModal .app-update-modal-section-title {
    min-height: 56px !important;
    padding: 0 18px !important;
}


/* Icono del encabezado */
#appUpdateModal .app-update-modal-section-title span {
    font-size: 20px !important;
}


/* Nombre de sección */
#appUpdateModal .app-update-modal-section-title strong {
    font-size: 16px !important;
    font-weight: 900 !important;
}


/* =========================================
   CADA CAMBIO
========================================= */

#appUpdateModal .app-update-modal-item {
    gap: 13px !important;

    padding:
        14px
        0 !important;
}


/* Check ✓ */
#appUpdateModal .app-update-modal-item > span {
    font-size: 20px !important;
    line-height: 1.4 !important;
}


/* Texto de cada modificación */
#appUpdateModal .app-update-modal-item p {
    font-size: 16px !important;
    line-height: 1.65 !important;

    color: #d0d0d0 !important;
}


/* Más espacio interno */
#appUpdateModal .app-update-modal-items {
    padding:
        5px
        20px !important;
}


/* Separación entre secciones */
#appUpdateModal .app-update-modal-section {
    margin-top: 18px !important;
}


/* =========================================
   HACER EL MODAL UN POCO MÁS ANCHO
========================================= */

#appUpdateModal .app-update-modal-card {
    width: min(
        850px,
        100%
    ) !important;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    #appUpdateModal .app-update-modal-header h2 {
        font-size: 28px !important;
    }

    #appUpdateModal .app-update-modal-main-title {
        font-size: 20px !important;
    }

    #appUpdateModal .app-update-modal-summary {
        font-size: 15px !important;
    }

    #appUpdateModal .app-update-modal-section-title strong {
        font-size: 15px !important;
    }

    #appUpdateModal .app-update-modal-item p {
        font-size: 15px !important;
    }
}

/* =========================================
   ACERCA DE - TIPOGRAFÍA DE LA INTERFAZ
========================================= */

#page-about,
#page-about *,
.about-main-card,
.about-main-card *,
.about-main-content,
.about-main-content * {
    font-family: inherit !important;
}


/* TEXTO GENERAL */

.about-main-content p {
    font-family: inherit !important;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}


/* TÍTULO PRINCIPAL */

.about-main-content .about-title {
    font-family: inherit !important;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}


/* TÍTULOS DE CADA APARTADO */

.about-main-content .about-section-title {
    font-family: inherit !important;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0;
}

/* =========================================
   ACERCA DE - DISEÑO PREMIUM DINÁMICO
========================================= */

#page-about {
    font-family: inherit !important;
}


/* =========================================
   TARJETA PRINCIPAL
========================================= */

.about-main-card {
    position: relative;

    max-width: 1050px;
    margin: 25px auto;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.28);
}


/* =========================================
   LÍNEA SUPERIOR COLOR ESCUDERÍA
========================================= */

.about-main-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--team-color);

    box-shadow:
        0 0 18px var(--team-color);
}


/* =========================================
   CONTENIDO
========================================= */

.about-main-content {
    padding: 32px 38px;
}


/* =========================================
   TODO HEREDA LA FUENTE DE LA WEB
========================================= */

.about-main-content,
.about-main-content * {
    font-family: inherit !important;
}


/* =========================================
   TÍTULO PRINCIPAL
========================================= */

.about-main-content .about-title {
    margin:
        0
        0
        25px;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: -0.02em;
}


/* =========================================
   TÍTULOS DE SECCIONES
========================================= */

.about-main-content .about-section-title {
    position: relative;

    margin:
        28px
        0
        10px;

    padding:
        10px
        14px;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 800;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-color) 14%,
                transparent
            ),
            transparent 75%
        );

    border-left:
        3px solid
        var(--team-color);

    border-radius:
        0
        8px
        8px
        0;
}


/* =========================================
   TEXTO
========================================= */

.about-main-content p {
    margin:
        0
        0
        8px;

    font-size: 13px;

    line-height: 1.65;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.72);
}


/* =========================================
   ESPACIADO ENTRE BLOQUES
========================================= */

.about-content-space {
    height: 4px;
}


/* =========================================
   EFECTO SUTIL EN LA TARJETA
========================================= */

.about-main-card::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -160px;
    right: -100px;

    background:
        var(--team-color);

    opacity: 0.07;

    filter: blur(70px);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .about-main-card {
        margin: 15px 0;
        border-radius: 14px;
    }


    .about-main-content {
        padding: 24px 20px;
    }


    .about-main-content .about-title {
        font-size: 20px;
    }


    .about-main-content .about-section-title {
        font-size: 14px;
    }


    .about-main-content p {
        font-size: 12.5px;
        line-height: 1.6;
    }
}

/* =========================================
   ACERCA DE - DISEÑO COMPACTO Y DINÁMICO
========================================= */

#page-about {
    font-family: inherit !important;
}


/* =========================================
   CONTENEDOR PRINCIPAL
========================================= */

#page-about .about-main-card {
    position: relative;

    max-width: 1150px;

    margin:
        22px
        auto;

    padding:
        0;

    border-radius:
        18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #111111
            ),
            #090909
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.30);

    overflow:
        hidden;
}


/* LÍNEA SUPERIOR COLOR ESCUDERÍA */

#page-about .about-main-card::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            transparent
        );
}


/* GLOW SUPERIOR DERECHO */

#page-about .about-main-card::after {
    content: "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    top:
        -170px;

    right:
        -100px;

    background:
        var(--team-primary);

    opacity:
        0.07;

    filter:
        blur(75px);

    border-radius:
        50%;

    pointer-events:
        none;
}


/* =========================================
   CONTENIDO
========================================= */

#page-about .about-main-content {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;

    padding:
        26px;
}


/* =========================================
   TÍTULO PRINCIPAL
========================================= */

#page-about .about-title {
    grid-column:
        1 / -1;

    margin:
        0
        0
        4px;

    padding:
        14px
        18px;

    border-radius:
        12px;

    font-size:
        21px !important;

    line-height:
        1.2;

    font-weight:
        900;

    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 11%,
                #161616
            ),
            #101010
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            rgba(255,255,255,0.07)
        );
}


/* =========================================
   CADA SECCIÓN
========================================= */

#page-about .about-section-title {
    position:
        relative;

    margin:
        0;

    padding:
        13px
        14px
        9px
        18px;

    font-size:
        14px !important;

    line-height:
        1.3;

    font-weight:
        900;

    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 12%,
                #141414
            ),
            #111111
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 17%,
            rgba(255,255,255,0.07)
        );

    border-bottom:
        0;

    border-radius:
        12px
        12px
        0
        0;
}


/* BARRA IZQUIERDA */

#page-about .about-section-title::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        8px;

    bottom:
        8px;

    width:
        3px;

    border-radius:
        0
        4px
        4px
        0;

    background:
        var(--team-primary);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            transparent
        );
}


/* DETALLE PEQUEÑO DEBAJO DEL TÍTULO */

#page-about .about-section-title::after {
    content:
        "";

    display:
        block;

    width:
        38px;

    height:
        2px;

    margin-top:
        8px;

    border-radius:
        5px;

    background:
        var(--team-primary);
}


/* =========================================
   TEXTO
========================================= */

#page-about .about-main-content p {
    margin:
        0;

    padding:
        4px
        18px;

    font-size:
        12.5px !important;

    line-height:
        1.65;

    font-weight:
        400;

    color:
        rgba(255,255,255,0.72);
}


/* AGRUPAR TEXTO CON SU TÍTULO */

#page-about .about-section-title + p {
    padding-top:
        14px;
}


/* ÚLTIMO PÁRRAFO DE CADA GRUPO */

#page-about .about-main-content p + .about-section-title {
    margin-top:
        4px;
}


/* =========================================
   ESPACIOS VACÍOS DEL TEXTO
========================================= */

#page-about .about-content-space {
    display:
        none;
}


/* =========================================
   SIMULAR TARJETA POR BLOQUE
========================================= */

#page-about .about-section-title,
#page-about .about-section-title ~ p {
    border-left:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(255,255,255,0.06)
        );

    border-right:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(255,255,255,0.06)
        );
}


/* =========================================
   TEXTO RESALTADO
========================================= */

#page-about strong {
    color:
        #ffffff;
}


/* =========================================
   EFECTO HOVER SUTIL
========================================= */

#page-about .about-section-title:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 18%,
                #141414
            ),
            #111111
        );
}


/* =========================================
   CABECERA DE LA PÁGINA
========================================= */

#page-about .header-small {
    color:
        var(--team-primary) !important;
}


#page-about > .page-heading h1 {
    font-size:
        30px;
}


#page-about > .page-heading .page-subtitle {
    font-size:
        13px;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    #page-about .about-main-content {
        grid-template-columns:
            1fr;

        padding:
            18px;
    }


    #page-about .about-title {
        grid-column:
            1;

        font-size:
            19px !important;
    }


    #page-about .about-section-title {
        font-size:
            13.5px !important;
    }


    #page-about .about-main-content p {
        font-size:
            12px !important;
    }
}

/* =========================================
   ACERCA DE - DISEÑO ORDENADO Y COMPACTO
========================================= */

#page-about {
    font-family: inherit !important;
}


/* =========================================
   TARJETA PRINCIPAL
========================================= */

#page-about .about-main-card {
    position: relative;

    max-width: 980px;

    margin:
        22px
        auto;

    border-radius:
        18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #121212
            ),
            #090909
        );

    box-shadow:
        0 20px 55px
        rgba(0,0,0,0.30);

    overflow:
        hidden;
}


/* LÍNEA SUPERIOR */

#page-about .about-main-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 22px
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            transparent
        );
}


/* =========================================
   CONTENIDO
========================================= */

#page-about .about-main-content {
    display: block !important;

    padding:
        26px
        30px
        30px;
}


/* =========================================
   TÍTULO PRINCIPAL
========================================= */

#page-about .about-title {
    margin:
        0
        0
        20px;

    padding:
        14px
        16px;

    border-radius:
        12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 12%,
                #181818
            ),
            #111111
        );

    color:
        #ffffff;

    font-size:
        21px !important;

    line-height:
        1.25;

    font-weight:
        900;
}


/* =========================================
   TÍTULOS DE CADA BLOQUE
========================================= */

#page-about .about-section-title {
    position: relative;

    display: block;

    margin:
        22px
        0
        10px;

    padding:
        12px
        14px
        12px
        18px;

    border-radius:
        11px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            rgba(255,255,255,0.07)
        );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 11%,
                #151515
            ),
            #101010
        );

    color:
        #ffffff;

    font-size:
        14px !important;

    line-height:
        1.3;

    font-weight:
        850;
}


/* BARRA LATERAL COLOR ESCUDERÍA */

#page-about .about-section-title::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background:
        var(--team-primary);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            transparent
        );
}


/* DETALLE INFERIOR */

#page-about .about-section-title::after {
    content: "";

    display: block;

    width: 36px;
    height: 2px;

    margin-top:
        8px;

    border-radius:
        5px;

    background:
        var(--team-primary);
}


/* =========================================
   PÁRRAFOS
========================================= */

#page-about .about-main-content p {
    margin:
        0
        0
        9px;

    padding:
        0
        8px;

    color:
        rgba(255,255,255,0.74);

    font-size:
        12.5px !important;

    line-height:
        1.65;

    font-weight:
        400;
}


/* MÁS CERCANO AL TÍTULO */

#page-about .about-section-title + p {
    margin-top:
        2px;
}


/* =========================================
   ESPACIOS
========================================= */

#page-about .about-content-space {
    height:
        2px;
}


/* =========================================
   EFECTO HOVER
========================================= */

#page-about .about-section-title:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 17%,
                #151515
            ),
            #101010
        );
}


/* =========================================
   CABECERA DE ACERCA DE
========================================= */

#page-about .header-small {
    color:
        var(--team-primary) !important;
}


#page-about .page-heading h1 {
    font-size:
        30px;
}


#page-about .page-heading .page-subtitle {
    font-size:
        13px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    #page-about .about-main-content {
        padding:
            20px
            16px
            24px;
    }


    #page-about .about-title {
        font-size:
            19px !important;
    }


    #page-about .about-section-title {
        font-size:
            13.5px !important;
    }


    #page-about .about-main-content p {
        font-size:
            12px !important;

        line-height:
            1.6;
    }
}

/* =========================================
   ACERCA DE - ESTILO LIMPIO Y ELEGANTE
========================================= */

#page-about {
    font-family: inherit !important;
}


/* =========================================
   TARJETA PRINCIPAL
========================================= */

#page-about .about-main-card {
    position: relative;

    max-width: 980px;
    margin: 24px auto;

    border-radius: 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #121212
            ),
            #0b0b0b
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.28);

    overflow: hidden;
}


/* LÍNEA SUPERIOR */

#page-about .about-main-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
}


/* =========================================
   CONTENIDO
========================================= */

#page-about .about-main-content {
    display: block !important;

    padding:
        30px
        34px;
}


/* =========================================
   HERO
========================================= */

#page-about .about-hero-card {
    display: flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 22px;

    margin-bottom: 6px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);
}


#page-about .about-hero-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #151515
        );

    font-size: 21px;
}


#page-about .about-hero-card small {
    display: block;

    margin-bottom: 4px;

    color:
        var(--team-primary);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.20em;
}


#page-about .about-hero-card h2 {
    margin: 0;

    color: #ffffff;

    font-size: 21px;

    font-weight: 900;

    line-height: 1.2;
}


#page-about .about-hero-card p {
    margin: 5px 0 0;

    color:
        rgba(255,255,255,0.55);

    font-size: 11.5px !important;

    line-height: 1.5;
}


/* =========================================
   SECCIONES
========================================= */

#page-about .about-info-card {
    position: relative;

    padding:
        22px
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}


#page-about .about-info-card:last-child {
    border-bottom: 0;
}


/* =========================================
   TÍTULO DE CADA SECCIÓN
========================================= */

#page-about .about-info-card-header {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 10px;
}


#page-about .about-info-card-header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 14px;

    font-weight: 850;

    line-height: 1.3;
}


/* DETALLE COLOR ESCUDERÍA */

#page-about .about-info-card-header::before {
    content: "";

    width: 4px;
    height: 22px;

    flex: 0 0 auto;

    border-radius: 10px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
}


/* ELIMINAR LÍNEA VIEJA */

#page-about .about-info-line {
    display: none;
}


/* =========================================
   TEXTO DE CADA SECCIÓN
========================================= */

#page-about .about-info-card-body {
    padding-left: 15px;
}


#page-about .about-info-card-body p {
    margin:
        0
        0
        8px;

    color:
        rgba(255,255,255,0.68);

    font-size:
        12.3px !important;

    line-height:
        1.65;

    font-weight:
        400;
}


#page-about .about-info-card-body p:last-child {
    margin-bottom: 0;
}


/* =========================================
   HOVER MUY SUTIL
========================================= */

#page-about .about-info-card {
    transition:
        padding-left 0.18s ease,
        background 0.18s ease;
}


#page-about .about-info-card:hover {
    padding-left: 10px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                transparent
            ),
            transparent 70%
        );
}


/* =========================================
   CABECERA DE LA PÁGINA
========================================= */

#page-about .header-small {
    color:
        var(--team-primary) !important;
}


#page-about .page-heading h1 {
    font-size: 30px;
}


#page-about .page-heading .page-subtitle {
    font-size: 12.5px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    #page-about .about-main-content {
        padding:
            24px
            20px;
    }


    #page-about .about-hero-card h2 {
        font-size: 18px;
    }


    #page-about .about-info-card-header h3 {
        font-size: 13.5px;
    }


    #page-about .about-info-card-body p {
        font-size: 11.8px !important;
    }
}

/* =========================================
   ADMIN - HISTORIAL DE UPDATES
   REDISEÑO VISUAL
========================================= */


/* =========================================
   PANEL PRINCIPAL
========================================= */

.admin-updates-panel {
    position: relative;

    padding: 26px !important;

    border-radius: 18px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            rgba(255,255,255,0.08)
        ) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #141414
            ),
            #0b0b0b
        ) !important;

    overflow: hidden;
}


/* LÍNEA SUPERIOR */

.admin-updates-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
}


/* =========================================
   CABECERA
========================================= */

.admin-updates-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.admin-updates-header .header-small {
    margin-bottom: 4px;

    color:
        var(--team-primary) !important;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.18em;
}


.admin-updates-header h2 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 900;
}


.admin-updates-header .page-subtitle {
    margin: 0;

    color:
        rgba(255,255,255,0.55);

    font-size: 12.5px;

    line-height: 1.5;
}


/* =========================================
   BOTÓN NUEVO UPDATE
========================================= */

.admin-new-update-button {
    min-width: 190px;

    padding:
        13px
        20px !important;

    border-radius:
        11px !important;

    border:
        1px solid
        var(--team-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #151515
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        none !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.admin-new-update-button:hover {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #151515
        ) !important;

    border-color:
        var(--team-primary) !important;

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        ) !important;

    transform:
        translateY(-2px);
}


/* =========================================
   LISTADO DE UPDATES
========================================= */

#adminUpdatesList {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


/* =========================================
   TARJETA DE CADA UPDATE
========================================= */

#adminUpdatesList > * {
    position: relative;

    margin: 0 !important;

    padding:
        18px !important;

    border-radius:
        14px !important;

    border:
        1px solid
        rgba(255,255,255,0.09) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        ) !important;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* BARRA IZQUIERDA */

#adminUpdatesList > *::before {
    content: "";

    position: absolute;

    top: 14px;
    bottom: 14px;
    left: 0;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background:
        var(--team-primary);

    opacity: 0.65;

    transition:
        opacity 0.2s ease;
}


/* HOVER TARJETA */

#adminUpdatesList > *:hover {
    transform:
        translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            rgba(255,255,255,0.10)
        ) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                #151515
            ),
            #0e0e0e
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,0.24);
}


#adminUpdatesList > *:hover::before {
    opacity: 1;
}


/* =========================================
   TEXTOS DE LAS TARJETAS
========================================= */

#adminUpdatesList small {
    color:
        var(--team-primary) !important;

    font-size:
        10px !important;

    font-weight:
        800;

    letter-spacing:
        0.04em;
}


#adminUpdatesList h2,
#adminUpdatesList h3,
#adminUpdatesList strong {
    color:
        #ffffff;

    line-height:
        1.3;
}


#adminUpdatesList h2,
#adminUpdatesList h3 {
    margin:
        5px
        0;

    font-size:
        16px !important;

    font-weight:
        850;
}


#adminUpdatesList p {
    color:
        rgba(255,255,255,0.58);

    font-size:
        12px !important;

    line-height:
        1.5;
}


/* =========================================
   BOTONES DENTRO DE CADA UPDATE
========================================= */

#adminUpdatesList button {
    min-height:
        38px;

    margin-top:
        10px;

    padding:
        9px
        13px !important;

    border-radius:
        9px !important;

    border:
        1px solid
        rgba(255,255,255,0.12) !important;

    background:
        #111111 !important;

    color:
        rgba(255,255,255,0.82) !important;

    font-size:
        11px !important;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


/* TODOS LOS BOTONES USAN COLOR DE ESCUDERÍA */

#adminUpdatesList button:hover {
    color:
        #ffffff !important;

    border-color:
        var(--team-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #111111
        ) !important;

    box-shadow:
        0 0 16px
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            transparent
        );

    transform:
        translateY(-1px);
}


/* =========================================
   ELIMINAR ROJO FIJO
========================================= */

#adminUpdatesList .danger-outline,
#adminUpdatesList .danger-button,
#adminUpdatesList button.danger {
    border-color:
        rgba(255,255,255,0.12) !important;

    color:
        rgba(255,255,255,0.82) !important;
}


#adminUpdatesList .danger-outline:hover,
#adminUpdatesList .danger-button:hover,
#adminUpdatesList button.danger:hover {
    border-color:
        var(--team-primary) !important;

    color:
        #ffffff !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #111111
        ) !important;
}


/* =========================================
   PRIMER UPDATE = MÁS RECIENTE
========================================= */

#adminUpdatesList > *:first-child {
    grid-column:
        1 / -1;

    background:
        linear-gradient(
            120deg,
            color-mix(
                in srgb,
                var(--team-primary) 8%,
                #151515
            ),
            #0e0e0e 65%
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,0.08)
        ) !important;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    #adminUpdatesList {
        grid-template-columns:
            1fr;
    }


    #adminUpdatesList > *:first-child {
        grid-column:
            1;
    }


    .admin-updates-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .admin-new-update-button {
        width: 100%;
    }
}

/* =========================================
   UPDATES - TODOS DEL MISMO TAMAÑO
========================================= */

#adminUpdatesList {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-auto-rows:
        158px;

    gap: 14px;

    width: 100%;
}


/* =========================================
   TODAS LAS TARJETAS IGUALES
========================================= */

#adminUpdatesList > * {
    position: relative;

    width: 100%;
    height: 158px;

    box-sizing: border-box;

    margin: 0 !important;

    padding: 18px !important;

    display: flex;
    flex-direction: column;

    border-radius: 14px !important;

    border:
        1px solid
        rgba(255,255,255,0.09) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        ) !important;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================
   IMPORTANTE:
   QUITAR EL V1.4 A TODO EL ANCHO
========================================= */

#adminUpdatesList > *:first-child {
    grid-column: auto !important;

    width: 100% !important;
    height: 158px !important;

    min-height: 158px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.012)
        ) !important;

    border-color:
        rgba(255,255,255,0.09) !important;
}


/* =========================================
   DETALLE COLOR ESCUDERÍA
========================================= */

#adminUpdatesList > *::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 0;

    width: 3px;

    border-radius:
        0
        4px
        4px
        0;

    background:
        var(--team-primary);

    opacity: 0.7;

    transition:
        opacity 0.2s ease;
}


/* =========================================
   BOTONES ABAJO
========================================= */

#adminUpdatesList > * > div:last-child {
    margin-top: auto;
}


/* =========================================
   HOVER
========================================= */

#adminUpdatesList > *:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--team-primary) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                #151515
            ),
            #0e0e0e
        ) !important;

    box-shadow:
        0 10px 26px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(0,0,0,0.30)
        );
}


#adminUpdatesList > *:hover::before {
    opacity: 1;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    #adminUpdatesList {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;
    }


    #adminUpdatesList > *,
    #adminUpdatesList > *:first-child {
        height: auto !important;

        min-height: 158px !important;

        grid-column: auto !important;
    }
}

/* =========================================
   HOME - COCHE DE ESCUDERÍA
========================================= */

/* HERO PRINCIPAL */

#page-home .dashboard-hero {
    position: relative;

    min-height: 300px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            100deg,
            color-mix(
                in srgb,
                var(--team-primary) 75%,
                #111111
            ) 0%,

            color-mix(
                in srgb,
                var(--team-primary) 42%,
                #101010
            ) 28%,

            color-mix(
                in srgb,
                var(--team-primary) 12%,
                #0c0c0c
            ) 58%,

            #080808 82%,

            #060606 100%
        ) !important;
}


/* =========================================
   CONTENIDO IZQUIERDO
========================================= */

#page-home .hero-content {
    position: relative;

    z-index: 5;

    width: 32%;
    max-width: 420px;
}


#page-home .hero-content h2 {
    position: relative;

    z-index: 5;

    font-size: 38px;

    line-height: 1.02;

    font-weight: 900;
}


#page-home .hero-content p {
    position: relative;

    z-index: 5;

    max-width: 330px;
}


/* =========================================
   ÁREA DEL COCHE
========================================= */

#page-home .home-team-car-area {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 38%;

    width: 50%;
    height: 100%;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    pointer-events: none;
}


/* =========================================
   COCHE PNG
========================================= */

#page-home .home-team-car {
    position: relative;

    z-index: 3;

    display: block;

    width: 112%;
    max-width: 860px;

    max-height: 285px;

    object-fit: contain;

    object-position: center;

    opacity: 0;

    transform:
        translateY(10px)
        translateX(12px)
        scale(1.08);

    /* SIN SOMBRA ARTIFICIAL */
    filter: none;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* COCHE CARGADO */

#page-home .home-team-car.loaded {
    opacity: 1;

    transform:
        translateY(0)
        translateX(12px)
        scale(1.08);
}


/* =========================================
   GLOW COLOR ESCUDERÍA
========================================= */

#page-home .home-team-car-glow {
    position: absolute;

    z-index: 1;

    width: 82%;
    height: 64%;

    left: 52%;
    top: 51%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--team-primary) 32%,
                transparent
            ) 0%,

            color-mix(
                in srgb,
                var(--team-primary) 12%,
                transparent
            ) 45%,

            transparent 72%
        );

    opacity: 0.75;

    filter:
        blur(18px);

    pointer-events: none;
}


/* =========================================
   SOMBRA DEL COCHE
   DESACTIVADA - EL PNG YA LA INCLUYE
========================================= */

#page-home .home-team-car-shadow {
    display: none !important;
}


/* =========================================
   REDES SOCIALES
========================================= */

#page-home .hero-socials {
    position: relative;

    z-index: 6;

    margin-left: auto;

    align-self: flex-end;

    margin-bottom: 34px;
}


/* =========================================
   DETALLES DE LUZ EN EL HERO
========================================= */

#page-home .dashboard-hero::before {
    content: "";

    position: absolute;

    z-index: 0;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 34%,

            color-mix(
                in srgb,
                var(--team-primary) 8%,
                transparent
            ) 48%,

            transparent 61%
        );

    opacity: 0.85;
}


#page-home .dashboard-hero::after {
    content: "";

    position: absolute;

    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 58% 52%,
            color-mix(
                in srgb,
                var(--team-primary) 18%,
                transparent
            ),
            transparent 42%
        );
}


/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 1200px) {

    #page-home .hero-content {
        width: 35%;
    }


    #page-home .home-team-car-area {
        left: 36%;

        width: 49%;
    }


    #page-home .home-team-car {
        max-width: 720px;

        max-height: 250px;

        transform:
            translateY(8px)
            translateX(8px)
            scale(1.05);
    }


    #page-home .home-team-car.loaded {
        transform:
            translateY(0)
            translateX(8px)
            scale(1.05);
    }
}


/* =========================================
   RESPONSIVE - TABLET PEQUEÑA
========================================= */

@media (max-width: 1100px) {

    #page-home .dashboard-hero {
        min-height: 330px;
    }


    #page-home .hero-content {
        width: 40%;
    }


    #page-home .home-team-car-area {
        left: 38%;

        width: 45%;
    }


    #page-home .home-team-car {
        max-width: 610px;

        max-height: 220px;
    }


    #page-home .hero-socials {
        margin-bottom: 25px;
    }
}


/* =========================================
   RESPONSIVE - MÓVIL
========================================= */

@media (max-width: 1100px) {

    #page-home .dashboard-hero {
        min-height: 460px;
    }


    #page-home .hero-content {
        width: 100%;

        max-width: 100%;
    }


    #page-home .hero-content h2 {
        font-size: 31px;
    }


    #page-home .home-team-car-area {
        top: auto;

        left: 4%;
        bottom: 65px;

        width: 92%;
        height: 210px;

        transform: none;
    }


    #page-home .home-team-car {
        width: 100%;

        max-width: 600px;

        max-height: 195px;

        transform:
            translateY(6px)
            scale(1.02);
    }


    #page-home .home-team-car.loaded {
        transform:
            translateY(0)
            scale(1.02);
    }


    #page-home .home-team-car-glow {
        width: 90%;
        height: 70%;
    }


    #page-home .hero-socials {
        position: relative;

        z-index: 6;

        margin-bottom: 0;
    }


    #page-home .home-team-car-shadow {
        display: none !important;
    }
}

/* =========================================
   MIS SETUPS - DISEÑO PRINCIPAL
========================================= */

#page-my-setups {
    font-family: inherit;
}


/* =========================================
   CABECERA
========================================= */

#page-my-setups .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


#page-my-setups .page-header .header-small {
    color: var(--team-primary) !important;
}


#page-my-setups .page-header h1 {
    margin: 4px 0 6px;

    font-size: 30px;

    color: #ffffff;
}


#page-my-setups .page-header .page-subtitle {
    margin: 0;

    font-size: 13px;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );
}


/* =========================================
   BOTÓN NUEVO SETUP
========================================= */

#page-my-setups #newMySetupButton,
#page-my-setups #createFirstMySetupButton {

    border:
        1px solid
        var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #151515
        );

    color:
        #ffffff;

    border-radius:
        11px;

    padding:
        12px
        18px;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#page-my-setups #newMySetupButton:hover,
#page-my-setups #createFirstMySetupButton:hover {

    transform:
        translateY(-2px);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #151515
        );

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            transparent
        );
}


/* =========================================
   RESUMEN
========================================= */

#page-my-setups .my-setups-summary {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    padding:
        18px
        20px;

    border-radius:
        15px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            rgba(255,255,255,0.08)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #151515
            ),
            #0d0d0d
        );
}


/* ICONO */

#page-my-setups .my-setups-summary-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    font-size: 21px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,0.08)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #171717
        );
}


/* ETIQUETA */

#page-my-setups .my-setups-summary span {

    display: block;

    margin-bottom: 4px;

    color:
        var(--team-primary);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        0.16em;
}


/* CONTADOR */

#page-my-setups .my-setups-summary strong {

    display: block;

    margin-bottom: 4px;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        850;
}


/* TEXTO */

#page-my-setups .my-setups-summary p {

    margin: 0;

    color:
        rgba(255,255,255,0.55);

    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================
   FILTROS
========================================= */

#page-my-setups .my-setups-toolbar {

    display: flex;

    gap: 12px;

    margin-bottom: 20px;
}


#page-my-setups .my-setups-toolbar .race-select {

    min-width: 210px;

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            rgba(255,255,255,0.10)
        );
}


/* =========================================
   GRID DE SETUPS
========================================= */

#page-my-setups .my-setups-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* =========================================
   ESTADO VACÍO
========================================= */

#page-my-setups .my-setups-empty-state {

    grid-column:
        1 / -1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 340px;

    padding: 34px;

    text-align: center;

    border-radius:
        17px;

    border:
        1px dashed
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,0.10)
        );

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 4%,
                #131313
            ),
            #0c0c0c
        );
}


/* ICONO VACÍO */

#page-my-setups .my-setups-empty-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 16px;

    border-radius: 18px;

    font-size: 30px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #171717
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );

    box-shadow:
        0 0 24px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        );
}


/* TU GARAGE */

#page-my-setups .my-setups-empty-state > span {

    margin-bottom: 7px;

    color:
        var(--team-primary);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        0.18em;
}


/* TÍTULO */

#page-my-setups .my-setups-empty-state h2 {

    margin:
        0
        0
        8px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        850;
}


/* DESCRIPCIÓN */

#page-my-setups .my-setups-empty-state p {

    max-width: 460px;

    margin:
        0
        0
        20px;

    color:
        rgba(255,255,255,0.55);

    font-size:
        12.5px;

    line-height:
        1.6;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    #page-my-setups .my-setups-grid {

        grid-template-columns:
            1fr;
    }


    #page-my-setups .page-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    #page-my-setups #newMySetupButton {

        width: 100%;
    }
}


@media (max-width: 650px) {

    #page-my-setups .my-setups-toolbar {

        flex-direction:
            column;
    }


    #page-my-setups .my-setups-toolbar .race-select {

        width: 100%;

        min-width: 0;
    }


    #page-my-setups .my-setups-summary {

        align-items:
            flex-start;
    }


    #page-my-setups .my-setups-empty-state {

        min-height: 300px;

        padding:
            26px
            18px;
    }
}

/* =========================================
   MIS SETUPS - TARJETAS PREMIUM
========================================= */

#page-my-setups .my-setups-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 20px;
}


/* =========================================
   TARJETA
========================================= */

#page-my-setups .my-setup-card {
    position: relative;

    overflow: hidden;

    min-height: 255px;

    padding: 22px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,0.28);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   GLOW ESCUDERÍA
========================================= */

#page-my-setups .my-setup-card::before {
    content: "";

    position: absolute;

    inset: -40% -30% auto auto;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        var(--team-primary);

    opacity: 0.08;

    filter:
        blur(60px);

    pointer-events: none;
}


#page-my-setups .my-setup-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background:
        var(--team-primary);

    opacity: 0.9;

    pointer-events: none;
}


/* =========================================
   HOVER
========================================= */

#page-my-setups .my-setup-card:hover {
    transform:
        translateY(-4px);

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            rgba(255,255,255,0.10)
        );

    box-shadow:
        0 24px 55px
        rgba(0,0,0,0.40),

        0 0 22px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );
}


/* =========================================
   PARTE SUPERIOR
========================================= */

#page-my-setups .my-setup-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


#page-my-setups .my-setup-card-top h3 {
    margin:
        8px 0 0;

    font-size: 21px;
    line-height: 1.2;

    font-weight: 800;

    color: #ffffff;
}


/* =========================================
   BADGE
========================================= */

#page-my-setups .my-setup-personal-badge {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        6px 11px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.9px;

    color:
        var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(255,255,255,0.03)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            transparent
        );
}


/* =========================================
   BANDERA
========================================= */

#page-my-setups .my-setup-card-flag {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    flex-shrink: 0;

    border-radius: 15px;

    font-size: 27px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.08);
}


/* =========================================
   CIRCUITO
========================================= */

#page-my-setups .my-setup-card-circuit {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-top: 22px;

    padding:
        14px 15px;

    border-radius: 14px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid
        rgba(255,255,255,0.06);
}


#page-my-setups .my-setup-card-circuit strong {
    font-size: 14px;
    font-weight: 750;

    color:
        rgba(255,255,255,0.92);
}


#page-my-setups .my-setup-card-circuit span {
    font-size: 12px;
    font-weight: 700;

    color:
        var(--team-primary);
}


/* =========================================
   META - DISTANCIA / FECHA
========================================= */

#page-my-setups .my-setup-card-meta {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 14px;
}


#page-my-setups .my-setup-card-meta span {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding:
        6px 10px;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 700;

    color:
        rgba(255,255,255,0.72);

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid
        rgba(255,255,255,0.055);
}


/* =========================================
   BOTONES
========================================= */

#page-my-setups .my-setup-card-actions {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: 20px;
}


#page-my-setups .my-setup-card-actions button {
    min-height: 42px;

    padding:
        9px 10px;

    border-radius: 12px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    background:
        rgba(255,255,255,0.035);

    color:
        rgba(255,255,255,0.88);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#page-my-setups .my-setup-card-actions button:hover {
    transform:
        translateY(-2px);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            rgba(255,255,255,0.04)
        );

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,0.08)
        );
}


/* =========================================
   BOTÓN COMPARTIR
========================================= */

#page-my-setups .my-setup-card-actions button:nth-child(2) {
    color:
        var(--team-primary);

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            rgba(255,255,255,0.025)
        );
}


/* =========================================
   ELIMINAR
========================================= */

#page-my-setups .my-setup-card-actions .danger-outline {
    color:
        #ff7777;

    border-color:
        rgba(255,90,90,0.22);
}


#page-my-setups .my-setup-card-actions .danger-outline:hover {
    background:
        rgba(255,70,70,0.07);

    border-color:
        rgba(255,90,90,0.38);
}


/* =========================================
   RESUMEN
========================================= */

#page-my-setups .my-setups-summary {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 16px;

    padding:
        20px 22px;

    margin-bottom: 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                rgba(255,255,255,0.025)
            ),
            rgba(255,255,255,0.018)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            rgba(255,255,255,0.06)
        );
}


#page-my-setups .my-setups-summary-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    border-radius: 16px;

    font-size: 25px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(255,255,255,0.03)
        );
}


#page-my-setups .my-setups-summary span {
    display: block;

    margin-bottom: 3px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    color:
        var(--team-primary);
}


#page-my-setups .my-setups-summary strong {
    display: block;

    font-size: 18px;
    font-weight: 800;

    color: #ffffff;
}


#page-my-setups .my-setups-summary p {
    margin:
        5px 0 0;

    font-size: 12px;

    color:
        rgba(255,255,255,0.48);
}


/* =========================================
   FILTROS
========================================= */

#page-my-setups .my-setups-toolbar {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 20px;
}


#page-my-setups .my-setups-toolbar .race-select {
    min-width: 190px;

    border-color:
        rgba(255,255,255,0.08);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#page-my-setups .my-setups-toolbar .race-select:focus {
    border-color:
        var(--team-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        );
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 720px) {

    #page-my-setups .my-setup-card-actions {
        grid-template-columns:
            1fr;
    }


    #page-my-setups .my-setups-toolbar {
        flex-direction: column;
    }


    #page-my-setups .my-setups-toolbar .race-select {
        width: 100%;
    }


    #page-my-setups .my-setups-summary {
        align-items: flex-start;
    }
}

/* =========================================
   MIS SETUPS - EDITOR PREMIUM
========================================= */

#page-my-setups .my-setup-editor {
    animation:
        mySetupEditorFade
        0.25s ease;
}


@keyframes mySetupEditorFade {

    from {
        opacity: 0;

        transform:
            translateY(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   LAYOUT
========================================= */

#page-my-setups .my-setup-editor .admin-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap: 22px;

    align-items: start;
}


/* =========================================
   PANELES
========================================= */

#page-my-setups .my-setup-editor .detail-panel {
    position: relative;

    overflow: hidden;

    padding: 24px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,0.28);
}


#page-my-setups .my-setup-editor .detail-panel::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        var(--team-primary);

    opacity: 0.065;

    filter:
        blur(80px);

    pointer-events: none;
}


/* =========================================
   CABECERA DEL EDITOR
========================================= */

#page-my-setups #mySetupEditorTitle {
    margin-top: 4px;

    font-size: 30px;
    line-height: 1.1;

    font-weight: 850;

    color: #ffffff;
}


#page-my-setups .my-setup-editor .page-subtitle {
    max-width: 620px;

    margin-top: 7px;

    font-size: 13px;

    color:
        rgba(255,255,255,0.50);
}


/* =========================================
   INPUT GROUP
========================================= */

#page-my-setups .my-setup-editor .input-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


#page-my-setups .my-setup-editor .input-group label {
    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.4px;

    color:
        rgba(255,255,255,0.62);
}


/* =========================================
   INPUTS Y SELECT
========================================= */

#page-my-setups .my-setup-editor .profile-input,
#page-my-setups .my-setup-editor .race-select,
#page-my-setups .my-setup-editor .setup-field input {
    width: 100%;

    min-height: 46px;

    padding:
        0 14px;

    border-radius: 13px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background:
        rgba(255,255,255,0.035);

    color:
        #ffffff;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


#page-my-setups .my-setup-editor .profile-input:hover,
#page-my-setups .my-setup-editor .race-select:hover,
#page-my-setups .my-setup-editor .setup-field input:hover {
    border-color:
        rgba(255,255,255,0.14);

    background:
        rgba(255,255,255,0.045);
}


#page-my-setups .my-setup-editor .profile-input:focus,
#page-my-setups .my-setup-editor .race-select:focus,
#page-my-setups .my-setup-editor .setup-field input:focus {
    border-color:
        var(--team-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            rgba(255,255,255,0.04)
        );
}


/* =========================================
   CIRCUITO / CONDICIÓN / DISTANCIA
========================================= */

#page-my-setups .my-setup-editor .admin-selector-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 18px;
}


/* =========================================
   GRID DE CAMPOS
========================================= */

#page-my-setups .my-setup-editor .setup-form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px 16px;

    margin-top: 24px;
}


/* =========================================
   TÍTULO DE SECCIÓN
========================================= */

#page-my-setups .my-setup-editor
.setup-form-section-title {
    grid-column:
        1 / -1;

    position: relative;

    display: flex;

    align-items: center;

    min-height: 42px;

    margin-top: 10px;

    padding:
        0 0 0 14px;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 0.9px;

    color:
        var(--team-primary);

    border-left:
        4px solid
        var(--team-primary);

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                transparent
            ),
            transparent
        );

    border-radius:
        8px;
}


/* =========================================
   CAMPOS INDIVIDUALES
========================================= */

#page-my-setups .my-setup-editor .setup-field {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 7px;

    padding:
        13px;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.055);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


#page-my-setups .my-setup-editor .setup-field:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            rgba(255,255,255,0.06)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 4%,
            rgba(255,255,255,0.025)
        );
}


#page-my-setups .my-setup-editor .setup-field label {
    min-height: 28px;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    color:
        rgba(255,255,255,0.57);
}


/* =========================================
   BOTONES
========================================= */

#page-my-setups .my-setup-editor .admin-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;
}


#page-my-setups .my-setup-editor .admin-actions button {
    min-height: 46px;

    padding:
        0 18px;

    border-radius: 13px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.3px;
}


#page-my-setups .my-setup-editor
.admin-actions .main-button {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            transparent
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 85%,
                #ffffff 5%
            ),
            color-mix(
                in srgb,
                var(--team-primary) 65%,
                #000000 20%
            )
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#page-my-setups .my-setup-editor
.admin-actions .main-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            transparent
        );
}


/* =========================================
   MENSAJE
========================================= */

#page-my-setups #mySetupMessage {
    margin-top: 14px;

    font-size: 12px;

    color:
        rgba(255,255,255,0.65);
}


/* =========================================
   PANEL DE PREVIEW
========================================= */

#page-my-setups .admin-preview-panel {
    position: sticky;

    top: 20px;
}


#page-my-setups .admin-preview-panel h2 {
    margin:
        2px 0 16px;

    font-size: 20px;

    font-weight: 800;

    color: #ffffff;
}


/* =========================================
   PREVIEW DEL SETUP
========================================= */

#page-my-setups #mySetupPreview {
    overflow: hidden;

    border-radius: 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            rgba(255,255,255,0.06)
        );

    background:
        rgba(0,0,0,0.22);

    box-shadow:
        inset 0 0 30px
        rgba(0,0,0,0.30);
}


/* =========================================
   META DE PREVIEW
========================================= */

#page-my-setups .my-setup-preview-meta {
    display: flex;

    justify-content: flex-end;

    margin-bottom: 10px;
}


#page-my-setups .my-setup-preview-meta span {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding:
        6px 11px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            rgba(255,255,255,0.03)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            transparent
        );

    color:
        var(--team-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.5px;
}


/* =========================================
   INFO COMPARTIR
========================================= */

#page-my-setups .my-setup-share-info {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 16px;

    padding:
        14px;

    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            rgba(255,255,255,0.02)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 16%,
            rgba(255,255,255,0.05)
        );
}


#page-my-setups .my-setup-share-info > span {
    font-size: 22px;
}


#page-my-setups .my-setup-share-info strong {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;

    color: #ffffff;
}


#page-my-setups .my-setup-share-info p {
    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    color:
        rgba(255,255,255,0.48);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1050px) {

    #page-my-setups .my-setup-editor .admin-layout {
        grid-template-columns:
            1fr;
    }


    #page-my-setups .admin-preview-panel {
        position: relative;

        top: 0;
    }
}


@media (max-width: 760px) {

    #page-my-setups .my-setup-editor
    .admin-selector-grid {
        grid-template-columns:
            1fr;
    }


    #page-my-setups .my-setup-editor
    .setup-form-grid {
        grid-template-columns:
            1fr;
    }


    #page-my-setups .my-setup-editor
    .detail-panel {
        padding: 17px;

        border-radius: 18px;
    }


    #page-my-setups #mySetupEditorTitle {
        font-size: 26px;
    }


    #page-my-setups .my-setup-editor
    .admin-actions {
        flex-direction: column;
    }


    #page-my-setups .my-setup-editor
    .admin-actions button {
        width: 100%;
    }
}

/* =========================================
   SETUP SECO - AMARILLO / DORADO
========================================= */

.setup-card.dry,
.published-setup-card.dry,
.setup-weather-dry {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #f5b400 0%,
            #d89400 42%,
            #9a5c00 100%
        );

    border:
        1px solid
        rgba(255, 193, 7, 0.45);

    color:
        #ffffff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.12),

        0 10px 30px
        rgba(0,0,0,0.22);
}


/* =========================================
   LUZ / DETALLE DE FONDO
========================================= */

.setup-card.dry::before,
.published-setup-card.dry::before,
.setup-weather-dry::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,0.10) 0%,
            transparent 28%,
            rgba(255,255,255,0.04) 52%,
            transparent 72%
        );
}


/* =========================================
   TEXTO SETUP SECO
========================================= */

.setup-card.dry .setup-weather-label,
.published-setup-card.dry .setup-weather-label,
.setup-weather-dry .setup-weather-label {
    color:
        #fff4c2;

    font-weight:
        850;

    letter-spacing:
        1px;
}


/* =========================================
   ICONO DEL SOL
========================================= */

.setup-card.dry .setup-weather-icon,
.published-setup-card.dry .setup-weather-icon,
.setup-weather-dry .setup-weather-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    margin-right: 7px;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.28);

    color:
        #ffe66d;

    font-size:
        18px;

    line-height:
        1;

    text-shadow:
        0 0 8px
        rgba(255,230,109,0.85),

        0 0 16px
        rgba(255,193,7,0.55);

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,0.12),

        0 0 12px
        rgba(255,193,7,0.20);
}


/* =========================================
   TÍTULO DEL CIRCUITO
========================================= */

.setup-card.dry h3,
.published-setup-card.dry h3,
.setup-weather-dry h3 {
    color:
        #ffffff;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,0.28);
}


/* =========================================
   PAÍS / TEXTO SECUNDARIO
========================================= */

.setup-card.dry .setup-country,
.published-setup-card.dry .setup-country,
.setup-weather-dry .setup-country {
    color:
        rgba(255,255,255,0.82);
}


/* =========================================
   HOVER
========================================= */

.setup-card.dry:hover,
.published-setup-card.dry:hover,
.setup-weather-dry:hover {
    filter:
        brightness(1.04);

    box-shadow:
        0 14px 36px
        rgba(0,0,0,0.30),

        0 0 18px
        rgba(245,180,0,0.14);
}

/* =========================================
   SETUP SECO
========================================= */

.published-setup-card-header.dry {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #d79a00 0%,
            #b87300 48%,
            #754300 100%
        );

    border:
        1px solid
        rgba(255, 193, 7, 0.35);

    color:
        #ffffff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.10),

        0 8px 24px
        rgba(0,0,0,0.22);
}


/* LUZ SUAVE DE FONDO */

.published-setup-card-header.dry::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.10),
            transparent 28%,
            rgba(255,255,255,0.025) 55%,
            transparent 75%
        );
}


/* =========================================
   TEXTO SETUP SECO
========================================= */

.published-setup-card-header.dry .setup-weather {
    position: relative;

    z-index: 2;

    color:
        #fff3bf;

    font-weight:
        850;

    letter-spacing:
        1px;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,0.28);
}


/* =========================================
   SOL MÁS VISIBLE
========================================= */

.published-setup-card-header.dry .setup-weather {
    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.published-setup-card-header.dry .setup-weather::before {
    content: "☀";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.28);

    color:
        #ffe66d;

    font-size:
        18px;

    line-height:
        1;

    text-shadow:
        0 0 8px
        rgba(255,230,109,0.90),

        0 0 16px
        rgba(255,193,7,0.55);

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,0.12),

        0 0 10px
        rgba(255,193,7,0.18);
}


/* =========================================
   TÍTULO CIRCUITO
========================================= */

.published-setup-card-header.dry h3 {
    position: relative;

    z-index: 2;

    color:
        #ffffff;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,0.32);
}


/* =========================================
   PAÍS
========================================= */

.published-setup-card-header.dry
.published-setup-meta {
    position: relative;

    z-index: 2;

    color:
        rgba(255,255,255,0.82);
}

/* =========================================
   CORRECCIÓN DEFINITIVA - SOL DUPLICADO
========================================= */

.published-setup-card-header.dry
.setup-weather::before {
    content: none !important;

    display: none !important;
}

/* =========================================
   CABECERAS SETUPS - BASE UNIFICADA
========================================= */

.published-setup-card-header.dry,
.published-setup-card-header.wet {
    position: relative;

    overflow: hidden;

    min-height: 130px;

    padding: 20px;

    border-radius:
        18px 18px 0 0;

    color: #ffffff;

    box-sizing: border-box;
}


/* =========================================
   SECO - DORADO / AMARILLO
========================================= */

.published-setup-card-header.dry {
    background:
        linear-gradient(
            115deg,
            #e3a600 0%,
            #c47c00 52%,
            #8f5200 100%
        ) !important;

    border-top:
        1px solid
        rgba(255,215,80,0.45);

    border-left:
        1px solid
        rgba(255,215,80,0.30);

    border-right:
        1px solid
        rgba(255,215,80,0.20);
}


/* =========================================
   MOJADO - AZUL
========================================= */

.published-setup-card-header.wet {
    background:
        linear-gradient(
            115deg,
            #0d6fc4 0%,
            #09539a 52%,
            #07386c 100%
        ) !important;

    border-top:
        1px solid
        rgba(70,170,255,0.45);

    border-left:
        1px solid
        rgba(70,170,255,0.30);

    border-right:
        1px solid
        rgba(70,170,255,0.20);
}


/* =========================================
   MISMA ILUMINACIÓN PARA AMBAS
========================================= */

.published-setup-card-header.dry::before,
.published-setup-card-header.wet::before {
    content: "";

    position: absolute;

    inset: 0;

    display: block;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.10) 0%,
            transparent 30%,
            rgba(255,255,255,0.025) 60%,
            transparent 100%
        );
}


/* =========================================
   CLIMA
========================================= */

.published-setup-card-header.dry .setup-weather,
.published-setup-card-header.wet .setup-weather {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    min-height: 24px;

    margin: 0 0 10px 0;

    font-size: 12px;

    line-height: 24px;

    font-weight: 900;

    letter-spacing: 1.2px;

    color: #ffffff;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,0.30);
}


/* =========================================
   TÍTULO CIRCUITO
========================================= */

.published-setup-card-header.dry h3,
.published-setup-card-header.wet h3 {
    position: relative;

    z-index: 2;

    margin:
        0 0 5px 0;

    padding: 0;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 850;

    color: #ffffff;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,0.25);
}


/* =========================================
   PAÍS
========================================= */

.published-setup-card-header.dry
.published-setup-meta,

.published-setup-card-header.wet
.published-setup-meta {
    position: relative;

    z-index: 2;

    margin: 0;

    padding: 0;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 600;

    color:
        rgba(255,255,255,0.82);
}

/* =========================================
   ADMIN - CIRCUITOS REGISTRADOS
========================================= */

.admin-circuits-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );

    gap: 18px;

    margin-top: 20px;
}


/* =========================================
   TARJETA CIRCUITO ADMIN
========================================= */

.admin-circuit-card {
    position: relative;

    overflow: visible;

    display: flex;
    flex-direction: column;

    padding: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.02)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,0.28);
}


/* =========================================
   CABECERA
========================================= */

.admin-circuit-card-header {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.admin-circuit-flag {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border-radius: 15px;

    font-size: 27px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid
        rgba(255,255,255,0.07);
}


.admin-circuit-card-header h3 {
    margin: 0;

    font-size: 18px;

    color: #ffffff;
}


.admin-circuit-card-header p {
    margin: 4px 0 0;

    font-size: 12px;

    color:
        rgba(255,255,255,0.50);
}


/* =========================================
   DATOS
========================================= */

.admin-circuit-info {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.admin-circuit-info > div {
    padding: 12px;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.055);
}


.admin-circuit-info span {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.7px;

    color:
        rgba(255,255,255,0.42);
}


.admin-circuit-info strong {
    font-size: 13px;

    color: #ffffff;
}


/* =========================================
   UBICACIÓN
========================================= */

.admin-circuit-location {
    margin:
        14px 0 0;

    font-size: 12px;

    color:
        rgba(255,255,255,0.55);
}


/* =========================================
   BOTONES EDITAR / ELIMINAR
========================================= */

.admin-circuit-card .admin-actions {
    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    z-index: 5;

    gap: 10px;

    margin-top: 18px;
}


.admin-circuit-card .admin-actions button {
    display: inline-flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    align-items: center;
    justify-content: center;

    flex: 1;

    min-height: 42px;

    border-radius: 12px;

    cursor: pointer;
}


/* EDITAR */

.admin-circuit-card
.admin-actions
.secondary-button:not(.danger-outline) {
    color: #ffffff;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.10);
}


/* ELIMINAR */

.admin-circuit-card
.admin-actions
.danger-outline {
    color:
        #ff7b7b;

    background:
        rgba(255,70,70,0.05);

    border:
        1px solid
        rgba(255,90,90,0.25);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .admin-circuit-info {
        grid-template-columns:
            1fr;
    }


    .admin-circuit-card .admin-actions {
        flex-direction: column;
    }


    .admin-circuit-card
    .admin-actions button {
        width: 100%;
    }
}

/* =========================================
   SETUP SECO - DORADO / AMARILLO
========================================= */

.published-setup-card-header.dry {
    background:
        linear-gradient(
            115deg,
            #e3a600 0%,
            #c47c00 52%,
            #8f5200 100%
        ) !important;

    border-top:
        1px solid
        rgba(255,215,80,0.45) !important;

    border-left:
        1px solid
        rgba(255,215,80,0.30) !important;

    border-right:
        1px solid
        rgba(255,215,80,0.20) !important;

    color:
        #ffffff !important;
}


/* =========================================
   SETUP MOJADO - AZUL
========================================= */

.published-setup-card-header.wet {
    background:
        linear-gradient(
            115deg,
            #0d6fc4 0%,
            #09539a 52%,
            #07386c 100%
        ) !important;

    border-top:
        1px solid
        rgba(70,170,255,0.45) !important;

    border-left:
        1px solid
        rgba(70,170,255,0.30) !important;

    border-right:
        1px solid
        rgba(70,170,255,0.20) !important;

    color:
        #ffffff !important;
}


/* =========================================
   MISMA ESTRUCTURA PARA AMBOS
========================================= */

.published-setup-card-header.dry,
.published-setup-card-header.wet {
    position: relative;

    overflow: hidden;

    min-height: 130px;

    padding: 20px;

    border-radius:
        18px 18px 0 0;

    box-sizing:
        border-box;
}


/* =========================================
   EVITAR SOL DUPLICADO
========================================= */

.published-setup-card-header.dry
.setup-weather::before {
    content:
        none !important;

    display:
        none !important;
}


/* =========================================
   TEXTO DEL CLIMA
========================================= */

.published-setup-card-header.dry
.setup-weather,

.published-setup-card-header.wet
.setup-weather {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 0 10px 0;

    color:
        #ffffff !important;

    font-weight:
        900;

    letter-spacing:
        1.2px;

    text-shadow:
        0 1px 4px
        rgba(0,0,0,0.30);
}


/* =========================================
   TÍTULO
========================================= */

.published-setup-card-header.dry h3,
.published-setup-card-header.wet h3 {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 5px 0;

    color:
        #ffffff !important;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,0.25);
}


/* =========================================
   PAÍS
========================================= */

.published-setup-card-header.dry
.published-setup-meta,

.published-setup-card-header.wet
.published-setup-meta {
    position:
        relative;

    z-index:
        2;

    color:
        rgba(255,255,255,0.82) !important;
}

/* =========================================
   SELECTS - EDITAR / CREAR SETUP PERSONAL
========================================= */

/* Select cerrado */
.setup-editor select {
    background: #1f1f1f !important;
    color: #ffffff !important;

    border: 1px solid
        rgba(255, 255, 255, 0.10) !important;

    border-radius: 12px;

    color-scheme: dark;
}


/* Opciones del desplegable */
.setup-editor select option {
    background-color: #171717 !important;
    color: #ffffff !important;
}


/* Opción seleccionada */
.setup-editor select option:checked {
    background-color: #1467d9 !important;
    color: #ffffff !important;
}


/* Opciones deshabilitadas */
.setup-editor select option:disabled {
    color: #777777 !important;
}


/* Mejor legibilidad */
.setup-editor select,
.setup-editor select option {
    font-weight: 600;
}

/* =========================================
   CORRECCIÓN GLOBAL DE SELECTS
   FONDO OSCURO + TEXTO LEGIBLE
========================================= */

select {
    color-scheme: dark !important;

    background-color: #1d1d1d !important;
    color: #ffffff !important;

    border-color:
        rgba(255, 255, 255, 0.12) !important;
}


/* =========================================
   OPCIONES DEL DESPLEGABLE
========================================= */

select option {
    background: #1d1d1d !important;
    background-color: #1d1d1d !important;

    color: #ffffff !important;
}


/* =========================================
   OPCIÓN SELECCIONADA
========================================= */

select option:checked {
    background: #1267d6 !important;
    background-color: #1267d6 !important;

    color: #ffffff !important;
}


/* =========================================
   OPCIONES DESHABILITADAS
========================================= */

select option:disabled {
    background-color: #1d1d1d !important;

    color:
        rgba(255, 255, 255, 0.35) !important;
}


/* =========================================
   FORZAR ESQUEMA OSCURO EN CHROME
========================================= */

select,
select:focus,
select:active {
    color-scheme: dark !important;
}

/* =========================================
   SELECTS CON COLOR DE ESCUDERÍA
========================================= */

select {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            rgba(255,255,255,0.10)
        ) !important;

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            transparent
        ),
        0 0 14px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        ) !important;
}


/* =========================================
   SELECT EN FOCO
========================================= */

select:focus {
    outline: none !important;

    border-color:
        var(--team-primary) !important;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            transparent
        ),
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        ) !important;
}


/* =========================================
   OPCIÓN SELECCIONADA - COLOR ESCUDERÍA
========================================= */

select option:checked {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 70%,
            #202020 30%
        ) !important;

    background-color:
        color-mix(
            in srgb,
            var(--team-primary) 70%,
            #202020 30%
        ) !important;

    color:
        #ffffff !important;

    font-weight:
        800 !important;
}

/* =========================================
   SELECT CERRADO - TOQUE DE ESCUDERÍA
========================================= */

select {
    background:
        linear-gradient(
            110deg,
            color-mix(
                in srgb,
                var(--team-primary) 9%,
                #1d1d1d 91%
            ),
            #1d1d1d 70%
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 70%,
            #444444 30%
        ) !important;
}

/* =========================================
   SETUPS PUBLICADOS - MEJORAR LEGIBILIDAD
========================================= */

/* Nombre de cada parámetro */
.published-setup-card .setup-value-row span {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    color:
        rgba(255, 255, 255, 0.78) !important;
}


/* Valor del parámetro */
.published-setup-card .setup-value-row strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;

    color: #ffffff !important;
}


/* Más espacio vertical en cada fila */
.published-setup-card .setup-value-row {
    min-height: 42px !important;

    padding:
        10px 2px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* =========================================
   TÍTULOS DE SECCIONES
========================================= */

.published-setup-card .setup-section-title {
    font-size: 13px !important;

    font-weight: 900 !important;

    letter-spacing:
        1.2px !important;

    line-height:
        1.3 !important;
}


/* =========================================
   NOMBRE DEL CIRCUITO
========================================= */

.published-setup-card-header h3 {
    font-size: 23px !important;
    font-weight: 800 !important;
}


/* País */
.published-setup-card-header
.published-setup-meta {
    font-size: 13px !important;
}


/* SETUP SECO / SETUP MOJADO */
.published-setup-card-header
.setup-weather {
    font-size: 13px !important;
    font-weight: 900 !important;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 700px) {

    .published-setup-card
    .setup-value-row span {
        font-size: 13px !important;
    }

    .published-setup-card
    .setup-value-row strong {
        font-size: 14px !important;
    }

    .published-setup-card
    .setup-section-title {
        font-size: 12px !important;
    }

    .published-setup-card-header h3 {
        font-size: 21px !important;
    }
}

/* =========================================
   BOTÓN - CREAR MI PRIMER SETUP
========================================= */

.my-first-setup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        0 22px;

    margin-top: 18px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 65%,
            rgba(255,255,255,0.12)
        );

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 78%,
                #111111 22%
            ),
            color-mix(
                in srgb,
                var(--team-primary) 55%,
                #111111 45%
            )
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.2px;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        );

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


.my-first-setup-button:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--team-primary);

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );
}


.my-first-setup-button:active {
    transform:
        translateY(0);
}


.my-first-setup-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.14);

    font-size: 18px;
    font-weight: 900;
}


@media (max-width: 700px) {

    .my-first-setup-button {
        width: 100%;

        min-height: 50px;

        padding:
            0 18px;

        font-size: 14px;
    }
}

/* =========================================
   MIS SETUPS - BOTÓN CREAR PRIMER SETUP
========================================= */

.my-setups-empty-state .primary-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 230px !important;
    min-height: 50px !important;

    margin-top: 18px !important;
    padding: 0 24px !important;

    border-radius: 14px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 75%,
            white 25%
        ) !important;

    background:
        linear-gradient(
            135deg,
            var(--team-primary) 0%,
            color-mix(
                in srgb,
                var(--team-primary) 65%,
                #111111 35%
            ) 100%
        ) !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 900 !important;

    letter-spacing: 0.3px !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            transparent
        ) !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease !important;
}


/* HOVER */

.my-setups-empty-state .primary-button:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.12) !important;

    box-shadow:
        0 12px 30px
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            transparent
        ) !important;
}


/* CLICK */

.my-setups-empty-state .primary-button:active {
    transform: translateY(0) scale(0.98) !important;
}


/* MÓVIL */

@media (max-width: 700px) {

    .my-setups-empty-state .primary-button {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* =========================================
   HERO - CENTRAR COCHE DE ESCUDERÍA
========================================= */

.dashboard-hero {
    position: relative;
}


/* =========================================
   ÁREA DEL COCHE
========================================= */

.home-team-car-area {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 42%;
    max-width: 720px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;

    pointer-events: none;
}


/* =========================================
   COCHE
========================================= */

.home-team-car {
    display: block;

    width: 100%;
    max-width: 680px;

    height: auto;

    object-fit: contain;

    margin: 0 auto;
}


/* =========================================
   REDES A LA DERECHA
========================================= */

.hero-socials {
    position: absolute;

    right: 28px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 4;
}


/* =========================================
   TEXTO DEL HERO
========================================= */

.hero-content {
    position: relative;

    z-index: 4;

    max-width: 330px;
}


/* =========================================
   AJUSTE PARA PANTALLAS MEDIANAS
========================================= */

@media (max-width: 1200px) {

    .home-team-car-area {
        left: 56%;

        width: 40%;
    }

}


/* =========================================
   MÓVIL / TABLET
========================================= */

@media (max-width: 1100px) {

    .dashboard-hero {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 20px;
    }


    .home-team-car-area {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: 85%;
        max-width: 560px;

        order: 2;
    }


    .hero-content {
        width: 100%;
        max-width: none;

        order: 1;
    }


    .hero-socials {
        position: relative;

        right: auto;
        top: auto;

        transform: none;

        order: 3;
    }
}/* =========================================
   HERO RESPONSIVE
========================================= */

.dashboard-hero {
    position: relative;
    overflow: hidden;
}


/* =========================================
   TEXTO
========================================= */

.hero-content {
    position: relative;
    z-index: 4;

    width: 28%;
    min-width: 250px;
    max-width: 360px;
}


/* =========================================
   ÁREA DEL COCHE
========================================= */

.home-team-car-area {
    position: absolute;

    top: 50%;
    left: 52%;

    transform:
        translate(-50%, -50%);

    /*
       Se adapta automáticamente
       al tamaño de la ventana
    */

    width:
        clamp(
            320px,
            38vw,
            700px
        );

    max-width: 45%;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 2;

    pointer-events: none;
}


/* =========================================
   COCHE
========================================= */

.home-team-car {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    object-fit: contain;

    object-position: center;

    margin: 0 auto;
}


/* =========================================
   GLOW Y SOMBRA
========================================= */

.home-team-car-glow,
.home-team-car-shadow {
    max-width: 100%;
}


/* =========================================
   REDES SOCIALES
========================================= */

.hero-socials {
    position: absolute;

    right: 28px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 4;
}


/* =========================================
   PANTALLAS MEDIANAS
========================================= */

@media (max-width: 1250px) {

    .home-team-car-area {
        left: 53%;

        width:
            clamp(
                280px,
                36vw,
                560px
            );

        max-width: 40%;
    }


    .hero-content {
        width: 30%;
    }
}


/* =========================================
   LAPTOP / VENTANA PEQUEÑA
========================================= */

@media (max-width: 1050px) {

    .home-team-car-area {
        /*
           Centramos más el coche
           cuando falta espacio
        */

        left: 50%;

        width:
            clamp(
                250px,
                34vw,
                450px
            );

        max-width: 38%;
    }


    .hero-socials {
        right: 18px;
    }


    .hero-content {
        width: 31%;

        min-width: 220px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .dashboard-hero {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 22px;
    }


    .hero-content {
        position: relative;

        width: 100%;
        max-width: none;
        min-width: 0;

        order: 1;

        text-align: center;
    }


    .home-team-car-area {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        order: 2;

        width:
            clamp(
                260px,
                75vw,
                550px
            );

        max-width: 90%;

        margin:
            0 auto;
    }


    .home-team-car {
        width: 100%;
        height: auto;

        margin:
            0 auto;
    }


    .hero-socials {
        position: relative;

        top: auto;
        right: auto;

        transform: none;

        order: 3;

        margin:
            0 auto;

        text-align: center;
    }
}


/* =========================================
   CELULARES
========================================= */

@media (max-width: 550px) {

    .dashboard-hero {
        padding:
            28px 18px;
    }


    .home-team-car-area {
        width: 92%;
        max-width: 420px;

        margin:
            5px auto;
    }


    .home-team-car {
        width: 100%;
        max-width: 100%;

        height: auto;
    }


    .hero-socials {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;
    }


    .hero-social-buttons {
        justify-content: center;
    }
}

/* =========================================
   BOTÓN MENÚ - BASE
========================================= */

.mobile-menu-button {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 0;

    font-family: inherit;

    cursor: pointer;
}


/* =========================================
   BOTÓN CIRCULAR DEL HEADER
========================================= */

.profile-circle.mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.035);

    color: #ffffff;

    font-size: 19px;
    font-weight: 800;

    line-height: 1;

    box-sizing: border-box;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* COLOR DE ESCUDERÍA */

.profile-circle.mobile-menu-button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 65%,
            rgba(255,255,255,0.15)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(20,20,20,0.90)
        );

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            transparent
        );
}


.profile-circle.mobile-menu-button:active {
    transform: scale(0.94);
}


/* =========================================
   ESCRITORIO
========================================= */

@media (min-width: 1101px) {

    /*
       En escritorio puedes ocultar el botón
       porque ya está visible la barra lateral.
    */

    .mobile-menu-button {
        display: none !important;
    }
}


/* =========================================
   MÓVIL / TABLET
========================================= */

@media (max-width: 1100px) {

    /* =====================================
       BOTÓN MENÚ
    ====================================== */

    .profile-circle.mobile-menu-button {
        display: flex !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 50% !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--team-primary) 55%,
                rgba(255,255,255,0.12)
            ) !important;

        background:
            color-mix(
                in srgb,
                var(--team-primary) 9%,
                rgba(20,20,20,0.92)
            ) !important;

        color: #ffffff !important;

        font-size: 19px !important;
        line-height: 1 !important;

        z-index: 20;
    }


    /* =====================================
       BARRA LATERAL
    ====================================== */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width:
            min(
                84vw,
                330px
            ) !important;

        height:
            100dvh !important;

        margin: 0 !important;

        padding:
            28px 18px
            24px !important;

        transform:
            translateX(-105%);

        opacity: 0;

        visibility: hidden;

        transition:
            transform 0.28s ease,
            opacity 0.2s ease,
            visibility 0.28s ease;

        background:
            rgba(10,10,10,0.97) !important;

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);

        border-right:
            1px solid
            rgba(255,255,255,0.08);

        box-shadow:
            20px 0 50px
            rgba(0,0,0,0.45);

        overflow-y: auto;

        z-index: 100000 !important;
    }


    /* =====================================
       MENÚ ABIERTO
    ====================================== */

    .sidebar.mobile-open {
        transform:
            translateX(0);

        opacity: 1;

        visibility: visible;
    }


    /* =====================================
       ELEMENTOS DEL MENÚ
    ====================================== */

    .sidebar .menu-item {
        width: 100%;

        min-height: 48px;

        margin:
            0 0 6px;

        padding:
            0 14px;

        border-radius: 12px;

        box-sizing: border-box;
    }


    /* =====================================
       CONTENIDO PRINCIPAL
    ====================================== */

    .dashboard-content,
    .main-content,
    .app-main,
    .content,
    .app-content {
        width: 100% !important;
        max-width: 100% !important;

        margin-left:
            0 !important;
    }


    /* =====================================
       HEADER
    ====================================== */

    .topbar,
    .app-header,
    .main-header {
        width: 100%;

        box-sizing: border-box;
    }
}


/* =========================================
   CELULAR PEQUEÑO
========================================= */

@media (max-width: 550px) {

    .profile-circle.mobile-menu-button {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        font-size: 18px !important;
    }


    .sidebar {
        width:
            min(
                88vw,
                310px
            ) !important;
    }
}

/* =========================================================
   HOME - ESTRUCTURA DEFINITIVA
========================================================= */

#page-home {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

#page-home .dashboard-header {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 22px !important;
}

/* =========================================================
   BARRA ROJA / HERO
========================================================= */

#page-home .dashboard-hero {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 260px !important;

    margin: 0 0 24px 0 !important;
    padding: 32px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}

/* TEXTO */

#page-home .hero-content {
    position: relative !important;

    width: 32% !important;
    min-width: 260px !important;
    max-width: 420px !important;

    z-index: 5 !important;
}

/* COCHE */

#page-home .home-team-car-area {
    position: absolute !important;

    top: 50% !important;
    left: 58% !important;

    transform: translate(-50%, -50%) !important;

    width: clamp(
        360px,
        36vw,
        700px
    ) !important;

    max-width: 47% !important;

    margin: 0 !important;

    z-index: 2 !important;
}

/* REDES */

#page-home .hero-socials {
    position: absolute !important;

    top: 50% !important;
    right: 28px !important;

    transform: translateY(-50%) !important;

    width: auto !important;

    z-index: 5 !important;
}

/* =========================================================
   CUADROS DEBAJO DE LA BARRA ROJA
========================================================= */

#page-home .dashboard-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 16px !important;

    margin: 0 !important;

    clear: both !important;
    position: relative !important;
    float: none !important;
}

/* TARJETAS */

#page-home .dashboard-card {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 150px !important;

    padding: 22px !important;

    box-sizing: border-box !important;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1300px) and (min-width: 851px) {

    #page-home .dashboard-hero {
        min-height: 250px !important;
    }

    #page-home .home-team-car-area {
        width: 40% !important;
        max-width: 520px !important;
    }

    #page-home .dashboard-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   TABLET / MÓVIL
========================================================= */

@media (max-width: 1100px) {

    #page-home {
        padding: 16px !important;
    }


    /* =========================================
       HERO
    ========================================= */

    #page-home .dashboard-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        min-height: 0 !important;

        padding: 28px 18px !important;

        gap: 20px !important;
    }


    /* =========================================
       TEXTO DEL HERO
    ========================================= */

    #page-home .hero-content {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

    order: 1 !important;
}


/* =========================================
   TEXTO DEL HERO SIEMPRE CENTRADO
========================================= */

#page-home .hero-content .hero-label {
    width: 100% !important;

    text-align: center !important;
}


#page-home .hero-content h2 {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


#page-home .hero-content p {
    width: 100% !important;
    max-width: 420px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


    /* =========================================
       COCHE
    ========================================= */

    #page-home .home-team-car-area {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    /* MOVER VISUALMENTE EL COCHE HACIA ABAJO */
    transform: translateY(45px) !important;

    width: min(95%, 520px) !important;
    max-width: 520px !important;

    margin: 0 auto !important;

    order: 2 !important;
}


    /* =========================================
       REDES SOCIALES
    ========================================= */

    #page-home .hero-socials {
        position: relative !important;

        top: auto !important;
        right: auto !important;

        transform: none !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        order: 3 !important;
    }


    /* =========================================
       TARJETAS
    ========================================= */

    #page-home .dashboard-grid {
        grid-template-columns:
            1fr !important;

        gap: 14px !important;
    }
}

/* =========================================================
   ESTRUCTURA PRINCIPAL DEL HOME
========================================================= */

#page-home .home-layout-stack {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 0 !important;

    box-sizing: border-box !important;
}


/* CABECERA */

#page-home .home-layout-stack > .dashboard-header {
    width: 100% !important;
    flex: none !important;

    margin-bottom: 22px !important;
}


/* HERO ARRIBA */

#page-home .home-layout-stack > .dashboard-hero {
    width: 100% !important;
    max-width: 100% !important;

    flex: none !important;

    margin:
        0 0 20px 0 !important;
}


/* CUADROS ABAJO */

#page-home .home-layout-stack > .dashboard-grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        ) !important;

    width: 100% !important;
    max-width: 100% !important;

    flex: none !important;

    gap: 16px !important;

    margin: 0 !important;
}


/* =========================================================
   VENTANA MEDIANA
========================================================= */

@media (max-width: 1150px) and (min-width: 851px) {

    #page-home
    .home-layout-stack
    > .dashboard-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 1100px) {

    #page-home
    .home-layout-stack
    > .dashboard-grid {

        grid-template-columns:
            1fr !important;

        gap: 14px !important;
    }
}

/* =========================================================
   POSICIÓN CAMPANA EN CELULAR
========================================================= */

@media (max-width: 1100px) {

    #page-home .notification-wrapper {
        position: absolute !important;

        top: 47px !important;
        right: 68px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 19999 !important;
    }
}

/* =========================================
   CONSENTIMIENTO DE COOKIES
========================================= */

.cookie-consent {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 18px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 0 20px;

    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    z-index: 50000;
}


.cookie-consent.hidden {
    display: none !important;
}


.cookie-consent-card {
    position: relative;

    width: min(
        1150px,
        calc(100vw - 40px)
    );

    padding:
        18px 190px 18px 22px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    border-radius:
        12px;

    background:
        rgba(13,13,13,0.98);

    color:
        #ffffff;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,0.45);
}


.cookie-consent-card h2 {
    margin:
        0 0 8px;

    text-align:
        left;

    font-size:
        15px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    color:
        #ff3b3b;
}


.cookie-consent-card p {
    margin:
        0 0 5px;

    max-width:
        760px;

    font-size:
        13px;

    line-height:
        1.5;

    color:
        rgba(255,255,255,0.72);
}


.cookie-consent-close {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 30px;
    height: 30px;

    border-radius:
        8px;

    border:
        1px solid
        rgba(255,255,255,0.15);

    background:
        rgba(255,255,255,0.04);

    color:
        #ffffff;

    font-size:
        16px;

    cursor:
        pointer;
}


.cookie-accept-button,
.cookie-deny-button {
    position: absolute;

    width: auto;
    min-width: 140px;

    min-height:
        42px;

    margin: 0;

    padding:
        0 20px;

    border-radius:
        8px;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;
}


.cookie-accept-button {
    right:
        165px;

    bottom:
        18px;

    border:
        none;

    background:
        var(--team-primary);

    color:
        #ffffff;
}


.cookie-deny-button {
    right:
        18px;

    bottom:
        18px;

    border:
        1px solid
        rgba(255,255,255,0.25);

    background:
        #151515;

    color:
        #ffffff;
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 1100px) {

    .cookie-consent {
        bottom:
            10px;

        padding:
            0 10px;
    }


    .cookie-consent-card {
        width:
            100%;

        padding:
            18px 16px 16px;

        border-radius:
            12px;
    }


    .cookie-consent-card h2 {
        padding-right:
            35px;

        font-size:
            14px;
    }


    .cookie-consent-card p {
        font-size:
            12px;
    }


    .cookie-accept-button,
    .cookie-deny-button {
        position:
            static;

        width:
            100%;

        min-height:
            44px;

        margin-top:
            10px;

        border-radius:
            8px;
    }
}
/* =========================================================
   TAMAÑO DEL COCHE EN HOME - PC
========================================================= */

@media (min-width: 1101px) {

    #page-home .home-team-car {
        width: 100% !important;
        max-width: 83% !important;

        height: auto !important;

        object-fit: contain !important;

        margin: 0 auto !important;
    }
}

.login-logo {
    width: 230px;
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto 15px;
    object-fit: contain;
}

#loginSection > h3 {
    text-align: center;
    width: 100%;
    margin-bottom: 25px;
}

/* =========================================
   REDES + COPYRIGHT - MENÚ MÓVIL
========================================= */

.mobile-sidebar-footer {
    display: none;
}


/* =========================================
   SOLO MÓVIL
========================================= */

@media (max-width: 1100px) {

    .mobile-sidebar-footer {
        display: block;

        width: 100%;

        margin-top: 24px;

        padding:
            22px 12px 18px;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.08);

        text-align: center;
    }


    .mobile-social-buttons {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 14px;

        margin-bottom: 16px;
    }


    .mobile-social-link {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        border:
            1px solid
            rgba(255, 255, 255, 0.12);

        border-radius: 50%;

        background:
            rgba(255, 255, 255, 0.04);

        text-decoration: none;

        transition:
            transform 0.2s ease,
            background 0.2s ease;
    }


    .mobile-social-link:active {
        transform: scale(0.92);
    }


    .mobile-social-link svg {
        display: block;

        max-width: 25px;
        max-height: 25px;
    }


    .mobile-social-link .social-kick {
        display: flex;

        align-items: center;
        justify-content: center;

        font-size: 22px;
        font-weight: 900;

        color: #53fc18;

        line-height: 1;
    }


    .mobile-sidebar-copyright {
        margin: 0 auto;

        max-width: 220px;

        font-size: 11px;
        font-weight: 500;

        line-height: 1.5;

        color:
            rgba(255, 255, 255, 0.42);
    }

}

/* =========================================
   COPYRIGHT - SIDEBAR ESCRITORIO
========================================= */

.desktop-sidebar-copyright {
    margin-top: 18px;

    padding:
        16px 14px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================================
   OCULTAR EN MÓVIL
========================================= */

@media (max-width: 1100px) {

    .desktop-sidebar-copyright {
        display: none;
    }

}

/* =========================================
   CAMPANA - MÓVIL / TABLET
========================================= */

@media (max-width: 1100px) {

    #notificationButton {
        display: none !important;
    }

    #notificationButton.has-notifications {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* =========================================
   ESCRITORIO
========================================= */

@media (min-width: 1101px) {

    #notificationButton {
        display: flex !important;
    }

}

/* =========================================
   BOTÓN MENÚ RESPONSIVE
========================================= */

.profile-circle.mobile-menu-button {
    appearance: none;
    -webkit-appearance: none;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    min-width: 46px;
    min-height: 46px;

    padding: 0;
    margin: 0;

    border-radius: 50%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            rgba(255,255,255,0.15)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            rgba(20,20,20,0.92)
        );

    color: #ffffff;

    font-size: 19px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;
}


/* =========================================
   MÓVIL / TABLET / MONITOR VERTICAL
========================================= */

@media (max-width: 1100px) {

    .profile-circle.mobile-menu-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* =========================================
   ESCRITORIO
========================================= */

@media (min-width: 1101px) {

    .profile-circle.mobile-menu-button {
        display: none !important;
    }

}

/* =========================================
   AJUSTE CAMPANA + MENÚ MÓVIL
========================================= */

@media (max-width: 1100px) {

    #page-home .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 14px !important;

        margin-left: auto !important;
        flex-shrink: 0 !important;
    }


    /* =====================================
       CAMPANA
    ====================================== */

    #page-home .notification-wrapper {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        margin: 0 !important;

        flex: 0 0 auto !important;
    }


    #page-home #notificationButton {
        position: relative !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        border-radius: 50% !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 18px !important;
    }


    /* =====================================
       CONTADOR ROJO
    ====================================== */

    #page-home #notificationBadge {
        position: absolute !important;

        top: -5px !important;
        right: -5px !important;

        min-width: 18px !important;
        height: 18px !important;

        padding: 0 5px !important;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 999px !important;

        font-size: 10px !important;
        font-weight: 900 !important;

        line-height: 1 !important;

        z-index: 5 !important;
    }


    /* =====================================
       BOTÓN ☰
    ====================================== */

    #page-home .profile-circle.mobile-menu-button {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        flex: 0 0 46px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

}

/* =========================================
   MENÚ GLOBAL MÓVIL - DEFINITIVO
========================================= */

.global-app-menu-button {
    display: none;
}


@media (max-width: 1100px) {

    .global-app-menu-button {
        display: flex !important;

        position: fixed !important;

        top: 18px !important;
        right: 18px !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        border:
            1px solid
            color-mix(
                in srgb,
                var(--team-primary) 55%,
                rgba(255, 255, 255, 0.15)
            ) !important;

        background:
            color-mix(
                in srgb,
                var(--team-primary) 9%,
                rgba(20, 20, 20, 0.95)
            ) !important;

        color: #ffffff !important;

        font-size: 19px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 100001 !important;

        box-shadow:
            0 6px 20px
            rgba(0, 0, 0, 0.35);
    }


    /* =====================================
       CAMPANA EN INICIO
       Queda a la izquierda del botón ☰
    ====================================== */

    #page-home .notification-wrapper {
        position: fixed !important;

        top: 18px !important;
        right: 78px !important;

        margin: 0 !important;

        z-index: 19999 !important;
    }

}


/* =========================================
   ESCRITORIO
========================================= */

@media (min-width: 1101px) {

    .global-app-menu-button {
        display: none !important;
    }


    #page-home .notification-wrapper {
        position: relative !important;

        top: auto !important;
        right: auto !important;
    }

}

/* =========================================
   CENTRAR LOGO - SIDEBAR MÓVIL
========================================= */

@media (max-width: 1100px) {

    .sidebar .sidebar-brand {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    .sidebar .sidebar-brand img {
        display: block !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform: none !important;
    }

}

/* =========================================
   MENÚ MÓVIL - ICONOS Y TEXTO AGRUPADOS
========================================= */

@media (max-width: 1100px) {

    .sidebar .sidebar-menu {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            8px 10px !important;
    }


    .sidebar .menu-item {
        display: grid !important;

        grid-template-columns:
            22px minmax(0, 1fr) !important;

        align-items:
            center !important;

        column-gap:
            6px !important;

        width:
            100% !important;

        min-height:
            46px !important;

        padding:
            10px 8px !important;

        text-align:
            left !important;
    }


    .sidebar .menu-icon {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            22px !important;

        min-width:
            22px !important;

        font-size:
            14px !important;

        line-height:
            1 !important;
    }


    .sidebar .menu-text {
        display:
            block !important;

        margin:
            0 !important;

        padding:
            0 !important;

        font-size:
            13px !important;

        line-height:
            1.2 !important;

        text-align:
            left !important;
    }

}

/* =========================================
   FOOTER DEL SIDEBAR MÓVIL
========================================= */

.mobile-sidebar-footer {
    display: none;
}


@media (max-width: 1100px) {

    .sidebar .mobile-sidebar-footer {
        display: block !important;

        width: 100% !important;

        margin-top: 24px !important;

        padding-top: 20px !important;

        border-top:
            1px solid
            rgba(255,255,255,0.08) !important;
    }


    .sidebar .mobile-social-buttons {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 14px !important;

        width: 100% !important;

        margin-bottom: 14px !important;
    }


    .sidebar .mobile-sidebar-copyright {
        display: block !important;

        margin: 0 auto !important;

        text-align: center !important;

        font-size: 11px !important;

        line-height: 1.45 !important;

        color:
            rgba(255,255,255,0.50) !important;
    }

}

/* =========================================
   DESCRIPCIÓN SEO - LOGIN
========================================= */

.login-seo-intro {
    margin-top: 14px;
    text-align: center;
}


.login-seo-intro h1 {
    margin: 0;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.3;

    color: rgba(255,255,255,0.88);
}


.login-seo-intro p {
    max-width: 330px;

    margin:
        7px auto 0;

    font-size: 11px;
    line-height: 1.5;

    color: rgba(255,255,255,0.48);
}


/* MÓVIL */

@media (max-width: 550px) {

    .login-seo-intro h1 {
        font-size: 14px;
    }


    .login-seo-intro p {
        font-size: 10.5px;
    }

}

/* =========================================
   TARJETA COMPRAR ACCESO - INICIO
========================================= */

.premium-dashboard-card {
    position: relative;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            rgba(255,255,255,0.10)
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                #111111
            ),
            #101010 70%
        );
}


.premium-dashboard-card:hover {
    border-color:
        var(--team-primary);
}


.premium-card-label {
    position: absolute;

    right: 20px;
    bottom: 20px;

    padding:
        5px 9px;

    border-radius: 6px;

    background:
        var(--team-primary);

    color:
        #ffffff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}

/* =========================================
   PÁGINA PREMIUM - COMPRAR ACCESO
========================================= */

.premium-access-container {
    display: flex;
    justify-content: center;

    width: 100%;

    padding: 25px 0 50px;
}


.premium-access-card {
    position: relative;

    width: 100%;
    max-width: 720px;

    padding: 38px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 20, 20, 0.98),
            rgba(8, 8, 8, 0.98)
        );

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);
}


.premium-access-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    margin-bottom: 18px;

    border:
        1px solid
        rgba(255, 193, 7, 0.35);

    border-radius: 999px;

    background:
        rgba(255, 193, 7, 0.08);

    color: #ffc107;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}


.premium-access-card h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 900;
}


.premium-access-description {
    margin: 0 0 28px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================
   BENEFICIOS
========================================= */

.premium-benefits {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 30px;
}


.premium-benefit {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.025);
}


.premium-benefit span {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background:
        rgba(0, 200, 170, 0.12);

    color: #00c8aa;

    font-weight: 900;
}


.premium-benefit p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.85);

    font-size: 13px;
    font-weight: 600;
}


/* =========================================
   PRECIO
========================================= */

.premium-price-area {
    padding: 25px;

    margin-bottom: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.025);

    text-align: center;
}


.premium-price-area > small {
    display: block;

    margin-bottom: 8px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}


.premium-price {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    gap: 6px;

    color: #ffffff;
}


.premium-price span {
    margin-top: 7px;

    font-size: 16px;
    font-weight: 800;
}


.premium-price strong {
    font-size: 44px;
    font-weight: 900;

    line-height: 1;
}


.premium-price-area p {
    margin: 10px 0 0;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 12px;
}


/* =========================================
   ESTADO DEL ACCESO
========================================= */

.premium-access-status {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 15px 17px;

    margin-bottom: 22px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.025);
}


.premium-access-status > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(255, 193, 7, 0.10);

    font-size: 17px;
}


.premium-access-status div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.premium-access-status small {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.premium-access-status strong {
    color: #ffffff;

    font-size: 13px;
}


/* =========================================
   PAYPAL
========================================= */

.paypal-button-container {
    width: 100%;

    min-height: 45px;

    margin-top: 10px;
}


.premium-payment-message {
    display: none;

    margin-top: 15px;

    padding: 13px;

    border-radius: 10px;

    text-align: center;

    font-size: 13px;
    font-weight: 700;
}


.premium-security-note {
    margin: 16px 0 0;

    color:
        rgba(255, 255, 255, 0.38);

    font-size: 11px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================
   PREMIUM - MÓVIL
========================================= */

@media (max-width: 700px) {

    .premium-access-container {
        padding:
            18px 0 35px;
    }


    .premium-access-card {
        padding: 22px 18px;

        border-radius: 17px;
    }


    .premium-access-card h2 {
        font-size: 24px;
    }


    .premium-benefits {
        grid-template-columns: 1fr;
    }


    .premium-price strong {
        font-size: 38px;
    }

}

/* =========================================
   FIX PANEL DE NOTIFICACIONES
========================================= */

.notification-wrapper {
    position: relative !important;
    overflow: visible !important;
    z-index: 50000 !important;
}

.header-actions {
    position: relative !important;
    overflow: visible !important;
    z-index: 50000 !important;
}

.dashboard-header {
    position: relative !important;
    overflow: visible !important;
    z-index: 50000 !important;
}

.notification-panel {
    display: block;
    position: absolute !important;

    top: calc(100% + 12px) !important;
    right: 0 !important;

    width: min(390px, 92vw) !important;
    max-height: 520px !important;

    z-index: 999999 !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.notification-panel.hidden {
    display: none !important;
}

/* =========================================
   NOTIFICACIONES - FIX DEFINITIVO MÓVIL
========================================= */

@media (max-width: 1100px) {

    .notification-panel {
        position: fixed !important;

        top: 76px !important;
        left: 12px !important;
        right: 12px !important;

        transform: none !important;

        width: auto !important;
        max-width: none !important;

        max-height: calc(100dvh - 96px) !important;

        padding: 14px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        z-index: 999999 !important;
    }


    .notification-list {
        width: 100% !important;

        max-height: calc(100dvh - 180px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    .notification-item {
        width: 100% !important;

        box-sizing: border-box !important;

        align-items: flex-start !important;

        gap: 10px !important;

        padding: 12px 8px !important;
    }


    .notification-item-icon {
        flex: 0 0 38px !important;
    }


    .notification-item-content {
        flex: 1 1 auto !important;

        width: 0 !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }


    .notification-item-content strong,
    .notification-item-content p,
    .notification-item-content small {
        white-space: normal !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    .notification-item-content strong {
        font-size: 13px !important;
    }


    .notification-item-content p {
        font-size: 11px !important;

        line-height: 1.45 !important;
    }
}

/* =========================================
   RESALTADO DE PARÁMETRO MODIFICADO
   VERSIÓN MÁS AJUSTADA
========================================= */

.setup-value-row.notification-highlight {
    background:
        linear-gradient(
            90deg,
            rgba(255, 105, 180, 0.15),
            rgba(255, 105, 180, 0.07)
        ) !important;

    border:
        1px solid
        rgba(255, 105, 180, 0.75) !important;

    border-radius:
        8px !important;

    padding:
        8px 10px !important;

    margin:
        3px 0 !important;

    box-shadow:
        0 0 10px
        rgba(255, 105, 180, 0.12) !important;

    transition:
        all 0.25s ease !important;
}


/* TEXTO DEL PARÁMETRO */

.setup-value-row.notification-highlight span {
    font-weight:
        600 !important;
}


/* VALOR MODIFICADO */

.setup-value-row.notification-highlight strong {
    font-weight:
        800 !important;

    color:
        #ffffff !important;
}

/* =========================================
   PREMIUM ACCESS - REDISEÑO PRO
========================================= */

#page-premium {
    position: relative;
    min-height: 100vh;

    padding-bottom: 80px;

    overflow: hidden;
}


/* =========================================
   FONDO PREMIUM
========================================= */

#page-premium::before {
    content: "";

    position: absolute;

    top: 120px;
    left: 50%;

    width: 900px;
    height: 900px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255, 190, 0, 0.08),
            transparent 62%
        );

    pointer-events: none;

    z-index: 0;
}


/* =========================================
   CONTENEDOR
========================================= */

.premium-access-container {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1100px;

    margin: 42px auto 0;

    padding: 0 22px;

    box-sizing: border-box;
}


/* =========================================
   TARJETA PRINCIPAL
========================================= */

.premium-access-card {
    position: relative;

    width: 100%;

    padding: 42px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(24,24,24,0.98),
            rgba(7,7,7,0.99)
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(255,255,255,0.04);

    overflow: hidden;

    box-sizing: border-box;
}


/* BRILLO SUPERIOR */

.premium-access-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;

    width: 76%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 196, 0, 0.90),
            transparent
        );
}


/* GLOW DORADO */

.premium-access-card::after {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 185, 0, 0.11),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================
   BADGE PREMIUM
========================================= */

.premium-access-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 8px 16px;

    margin-bottom: 22px;

    border:
        1px solid
        rgba(255, 196, 0, 0.50);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 199, 0, 0.14),
            rgba(255, 170, 0, 0.06)
        );

    box-shadow:
        0 0 24px
        rgba(255, 190, 0, 0.08);

    color: #ffd84d;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2.4px;
}


/* =========================================
   TÍTULO
========================================= */

.premium-access-card h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -1px;
}


.premium-access-description {
    position: relative;
    z-index: 2;

    max-width: 720px;

    margin: 0;

    color:
        rgba(255,255,255,0.62);

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================
   BENEFICIOS
========================================= */

.premium-benefits {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 32px;
}


.premium-benefit {
    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 66px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.015)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.025);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.premium-benefit:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 196, 0, 0.20);

    background:
        rgba(255,255,255,0.045);
}


.premium-benefit span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(0, 220, 170, 0.20),
            rgba(0, 160, 130, 0.09)
        );

    color: #00ddb0;

    box-shadow:
        0 0 20px
        rgba(0, 220, 170, 0.08);

    font-size: 18px;
    font-weight: 900;
}


.premium-benefit p {
    margin: 0;

    font-size: 13px;
    font-weight: 750;

    line-height: 1.4;
}


/* =========================================
   PRECIO - MÁS PROTAGONISTA
========================================= */

.premium-price-area {
    position: relative;
    z-index: 2;

    margin-top: 30px;

    padding: 34px 24px;

    text-align: center;

    border:
        1px solid
        rgba(255, 196, 0, 0.15);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 190, 0, 0.035),
            rgba(255,255,255,0.015)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.03);
}


.premium-price-area::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 190, 0, 0.055),
            transparent 60%
        );

    pointer-events: none;
}


.premium-price-area small {
    position: relative;

    color:
        rgba(255,255,255,0.48);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2.5px;
}


.premium-price {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 8px 0 5px;
}


.premium-price span {
    font-size: 18px;

    font-weight: 900;

    color:
        rgba(255,255,255,0.82);
}


.premium-price strong {
    font-size:
        clamp(
            50px,
            7vw,
            72px
        );

    line-height: 0.95;

    font-weight: 950;

    letter-spacing: -3px;

    color: #ffffff;

    text-shadow:
        0 0 30px
        rgba(255,255,255,0.06);
}


.premium-price-area p {
    position: relative;

    margin: 12px 0 0;

    color:
        rgba(255,255,255,0.42);

    font-size: 11px;
}


/* =========================================
   ESTADO
========================================= */

.premium-access-status {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 22px;

    padding: 16px 18px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.012)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.025);
}


.premium-access-status > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 50%;

    background:
        rgba(255, 190, 0, 0.11);

    box-shadow:
        0 0 18px
        rgba(255, 190, 0, 0.06);
}


.premium-access-status div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.premium-access-status small {
    color:
        rgba(255,255,255,0.40);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.6px;
}


.premium-access-status strong {
    font-size: 13px;

    font-weight: 850;
}


/* =========================================
   ESTADO PREMIUM HABILITADO
========================================= */

.premium-access-status.premium-enabled {
    border-color:
        rgba(0, 220, 160, 0.20);

    background:
        linear-gradient(
            90deg,
            rgba(0, 210, 150, 0.07),
            rgba(255,255,255,0.015)
        );
}


.premium-access-status.premium-enabled > span {
    background:
        rgba(0, 210, 150, 0.14);

    color: #00e0ad;
}


.premium-access-status.premium-enabled strong {
    color: #dffcf4;
}


/* =========================================
   PAYPAL
========================================= */

.paypal-button-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 620px;

    margin: 28px auto 0;
}


/* =========================================
   MENSAJE DE PAGO
========================================= */

.premium-payment-message {
    position: relative;
    z-index: 2;

    max-width: 620px;

    margin: 20px auto 0;

    padding: 13px 16px;

    border-radius: 14px;

    text-align: center;

    font-size: 12px;

    font-weight: 750;
}


/* =========================================
   NOTA
========================================= */

.premium-security-note {
    position: relative;
    z-index: 2;

    max-width: 620px;

    margin: 28px auto 0;

    color:
        rgba(255,255,255,0.30);

    font-size: 10px;

    line-height: 1.6;

    text-align: center;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    #page-premium {
        padding-bottom: 40px;
    }


    .premium-access-container {
        margin-top: 22px;

        padding:
            0 10px;
    }


    .premium-access-card {
        padding:
            24px 16px;

        border-radius: 20px;
    }


    .premium-access-card h2 {
        font-size: 28px;
    }


    .premium-access-description {
        font-size: 13px;
    }


    .premium-benefits {
        grid-template-columns:
            1fr;

        gap: 10px;

        margin-top: 24px;
    }


    .premium-benefit {
        min-height: 56px;

        padding:
            11px 12px;
    }


    .premium-price-area {
        margin-top: 24px;

        padding:
            28px 14px;
    }


    .premium-price strong {
        font-size: 50px;
    }


    .premium-access-status {
        padding:
            14px;
    }
}

/* =========================================
   PREMIUM - COLORES DE ESCUDERÍA
========================================= */

#page-premium {
    --premium-color: var(--team-primary, #ff69b4);
    --premium-color-secondary: var(--team-secondary, #ffffff);
}


/* =========================================
   GLOW GENERAL
========================================= */

#page-premium::before {
    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--premium-color) 14%,
                transparent
            ),
            transparent 65%
        ) !important;
}


/* =========================================
   TARJETA PREMIUM
========================================= */

.premium-access-card {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--premium-color) 28%,
            rgba(255,255,255,0.08)
        ) !important;

    box-shadow:
        0 35px 100px rgba(0,0,0,0.55),
        0 0 50px
        color-mix(
            in srgb,
            var(--premium-color) 7%,
            transparent
        ) !important;
}


/* LÍNEA SUPERIOR */

.premium-access-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--premium-color),
            transparent
        ) !important;
}


/* GLOW INTERNO */

.premium-access-card::after {
    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--premium-color) 15%,
                transparent
            ),
            transparent 70%
        ) !important;
}


/* =========================================
   ETIQUETA PREMIUM
========================================= */

.premium-access-badge {
    color:
        var(--premium-color) !important;

    border-color:
        color-mix(
            in srgb,
            var(--premium-color) 55%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--premium-color) 10%,
            transparent
        ) !important;

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--premium-color) 12%,
            transparent
        ) !important;
}


/* =========================================
   BENEFICIOS
========================================= */

.premium-benefit {
    border-color:
        color-mix(
            in srgb,
            var(--premium-color) 14%,
            rgba(255,255,255,0.08)
        ) !important;
}


.premium-benefit:hover {
    border-color:
        color-mix(
            in srgb,
            var(--premium-color) 45%,
            transparent
        ) !important;

    box-shadow:
        0 0 20px
        color-mix(
            in srgb,
            var(--premium-color) 8%,
            transparent
        ) !important;
}


/* CHECK */

.premium-benefit span {
    color:
        var(--premium-color) !important;

    background:
        color-mix(
            in srgb,
            var(--premium-color) 13%,
            transparent
        ) !important;

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--premium-color) 10%,
            transparent
        ) !important;
}


/* =========================================
   PRECIO
========================================= */

.premium-price-area {
    border-color:
        color-mix(
            in srgb,
            var(--premium-color) 25%,
            transparent
        ) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--premium-color) 7%,
                rgba(20,20,20,0.95)
            ),
            rgba(10,10,10,0.96)
        ) !important;
}


.premium-price-area::before {
    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--premium-color) 9%,
                transparent
            ),
            transparent 65%
        ) !important;
}


/* PRECIO */

.premium-price strong {
    color:
        #ffffff !important;

    text-shadow:
        0 0 30px
        color-mix(
            in srgb,
            var(--premium-color) 22%,
            transparent
        ) !important;
}


/* US$ */

.premium-price span {
    color:
        var(--premium-color) !important;
}


/* PAGO ÚNICO */

.premium-price-area small {
    color:
        var(--premium-color) !important;
}


/* =========================================
   ESTADO
========================================= */

.premium-access-status {
    border-color:
        color-mix(
            in srgb,
            var(--premium-color) 20%,
            transparent
        ) !important;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--premium-color) 6%,
                transparent
            ),
            rgba(255,255,255,0.015)
        ) !important;
}


.premium-access-status > span {
    color:
        var(--premium-color) !important;

    background:
        color-mix(
            in srgb,
            var(--premium-color) 14%,
            transparent
        ) !important;

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--premium-color) 10%,
            transparent
        ) !important;
}


/* =========================================
   ESTADO PREMIUM HABILITADO
========================================= */

.premium-access-status.premium-enabled {
    border-color:
        color-mix(
            in srgb,
            var(--premium-color) 40%,
            transparent
        ) !important;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--premium-color) 13%,
                transparent
            ),
            rgba(255,255,255,0.015)
        ) !important;
}


.premium-access-status.premium-enabled strong {
    color:
        #ffffff !important;
}


/* =========================================
   SOPORTE - USUARIO + ADMIN
========================================= */

#page-support {
    padding-bottom: 50px;
}

.support-heading {
    margin-bottom: 24px;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 20px;
    align-items: start;
}

.support-form-panel,
.support-tickets-panel,
.admin-support-panel {
    position: relative;
    overflow: hidden;
}

.support-form-panel::before,
.support-tickets-panel::before,
.admin-support-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--team-primary);
}

.support-panel-heading {
    margin-bottom: 24px;
}

.support-panel-heading h2 {
    margin: 6px 0 0;
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.support-form .input-group {
    margin-bottom: 16px;
}

.support-form .race-select,
.support-form .profile-input {
    width: 100%;
}

.support-textarea {
    min-height: 170px;
    height: auto !important;
    padding: 14px !important;
    resize: vertical;
    line-height: 1.55;
    background: #0b0b0b;
    color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    font: inherit;
}

.support-textarea:focus {
    border-color: var(--team-primary);
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--team-primary) 15%,
        transparent
    );
}

.support-tickets-list,
.admin-support-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-ticket-card {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: #0b0b0b;
}

.support-ticket-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.support-ticket-title {
    min-width: 0;
}

.support-ticket-title strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.support-ticket-title small {
    display: block;
    margin-top: 6px;
    color: #777777;
    font-size: 11px;
}

.support-ticket-message {
    margin-top: 14px;
    color: #aaaaaa;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.support-status-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.14);
}

.support-status-badge.pending {
    color: #ffd166;
    background: rgba(255, 209, 102, .08);
    border-color: rgba(255, 209, 102, .28);
}

.support-status-badge.progress {
    color: #72b7ff;
    background: rgba(67, 151, 255, .08);
    border-color: rgba(67, 151, 255, .28);
}

.support-status-badge.resolved {
    color: #65e6a3;
    background: rgba(50, 213, 131, .08);
    border-color: rgba(50, 213, 131, .28);
}

.admin-support-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 12px;
    margin: 20px 0;
}

.admin-support-filters .race-select {
    max-width: none;
}

#supportSubmitButton {
    margin-top: 4px;
}

#supportMessageStatus:empty {
    min-height: 0;
    margin-top: 0;
}

/* =========================================
   SOPORTE - RESPONSIVE
========================================= */

@media (max-width: 1100px) {
    .support-layout {
        grid-template-columns: 1fr;
    }

    .admin-support-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #page-support {
        padding-bottom: 30px;
    }

    .support-form-panel,
    .support-tickets-panel,
    .admin-support-panel {
        padding: 18px;
        border-radius: 14px;
    }

    .support-ticket-top {
        flex-direction: column;
    }

    .support-status-badge {
        align-self: flex-start;
    }

    .support-textarea {
        min-height: 150px;
    }
}


/* =========================================
   SOPORTE - CHAT DE TICKETS
========================================= */

.support-status-badge.waiting {
    color: #c7a0ff;
    background: rgba(154, 92, 255, .08);
    border-color: rgba(154, 92, 255, .30);
}

.support-ticket-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.support-ticket-open-button,
.support-ticket-delete-button {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
    transition: .18s ease;
}

.support-ticket-open-button {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #151515
        );
    color: #ffffff;
    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            #333333
        );
}

.support-ticket-open-button:hover {
    border-color: var(--team-primary);
    transform: translateY(-1px);
    box-shadow:
        0 0 16px
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            transparent
        );
}

.support-ticket-delete-button,
.support-delete-button {
    background: rgba(255, 87, 87, .08);
    color: #ff8c8c;
    border: 1px solid rgba(255, 87, 87, .32);
}

.support-ticket-delete-button:hover,
.support-delete-button:hover {
    background: rgba(255, 87, 87, .16);
    border-color: #ff5757;
    color: #ffffff;
}


/* =========================================
   PANEL DE CONVERSACIÓN
========================================= */

.support-conversation-panel {
    position: relative;
    margin-top: 22px;
    overflow: hidden;
}

.support-conversation-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--team-primary);
}

.support-conversation-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 20px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.support-conversation-header > div {
    min-width: 0;
}

.support-conversation-header h2 {
    margin: 5px 0 0;
}

.support-conversation-messages {
    min-height: 280px;
    max-height: 520px;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.18)
        );
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.support-conversation-messages::-webkit-scrollbar {
    width: 8px;
}

.support-conversation-messages::-webkit-scrollbar-track {
    background: #0c0c0c;
}

.support-conversation-messages::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 999px;
}

.support-chat-message {
    width: fit-content;
    max-width: min(78%, 720px);
    padding: 13px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.10);
    background: #151515;
}

.support-chat-message.user {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
}

.support-chat-message.admin {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 15%,
                #151515
            ),
            #111111
        );
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,.08)
        );
}

.support-chat-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 7px;
}

.support-chat-message-header strong {
    color: #ffffff;
    font-size: 11px;
}

.support-chat-message-header small {
    color: #777777;
    font-size: 9px;
    white-space: nowrap;
}

.support-chat-message p {
    margin: 0;
    color: #dddddd;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =========================================
   ESCRIBIR RESPUESTA
========================================= */

.support-conversation-composer {
    margin-top: 16px;
}

.support-conversation-composer .support-textarea {
    width: 100%;
    min-height: 115px;
    margin-bottom: 12px;
}

.support-conversation-composer .main-button {
    max-width: 280px;
}

.support-conversation-composer.is-closed {
    opacity: .65;
}

.support-conversation-closed {
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(50,213,131,.25);
    border-radius: 12px;
    background: rgba(50,213,131,.06);
    color: #92e9bb;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================
   ACCIONES DE ADMIN EN CONVERSACIÓN
========================================= */

.admin-support-conversation-actions {
    display: grid;
    grid-template-columns: minmax(220px, 320px) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.admin-support-conversation-actions .race-select {
    width: 100%;
}

.admin-support-ticket-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.admin-support-ticket-controls .race-select {
    width: auto;
    min-width: 180px;
}

.admin-support-ticket-controls .support-ticket-open-button,
.admin-support-ticket-controls .support-ticket-delete-button {
    flex-shrink: 0;
}


/* =========================================
   SOPORTE CHAT - RESPONSIVE
========================================= */

@media (max-width: 800px) {

    .support-conversation-header {
        flex-direction: column;
    }

    .support-conversation-header .secondary-button {
        width: 100%;
    }

    .admin-support-conversation-actions {
        grid-template-columns: 1fr;
    }

    .admin-support-conversation-actions .support-delete-button {
        width: 100%;
        min-height: 48px;
    }

    .support-chat-message {
        max-width: 90%;
    }

    .support-conversation-composer .main-button {
        max-width: none;
        width: 100%;
    }

    .admin-support-ticket-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-support-ticket-controls .race-select,
    .admin-support-ticket-controls .support-ticket-open-button,
    .admin-support-ticket-controls .support-ticket-delete-button {
        width: 100%;
    }
}

@media (max-width: 500px) {

    .support-conversation-panel {
        padding: 18px;
    }

    .support-conversation-messages {
        min-height: 240px;
        max-height: 440px;
        padding: 12px;
    }

    .support-chat-message {
        max-width: 96%;
        padding: 12px;
    }

    .support-chat-message-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* =========================================
   DETALLE DE CIRCUITO - AJUSTE VISUAL FINAL
========================================= */

/* Balancear imagen + estrategia en escritorio */
.circuit-top-layout {
    grid-template-columns:
        minmax(400px, 0.85fr)
        minmax(520px, 1.15fr) !important;

    gap: 20px !important;
    align-items: stretch !important;
}

/* Evitar que la imagen crezca demasiado */
.circuit-detail-hero {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 580px !important;
}

/* Mantener estrategia con la misma altura visual */
.circuit-strategy-panel {
    min-height: 0 !important;
    height: 100% !important;
    padding: 24px !important;
}

/* El contenido bloqueado ocupa el centro real del panel */
.circuit-strategy-panel:has(.strategy-locked-state) .strategy-text {
    flex: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    background: transparent !important;
    border: 0 !important;
}

/* Tarjeta premium proporcionada */
.circuit-strategy-panel .strategy-locked-state {
    width: min(620px, 88%) !important;
    max-width: 620px !important;

    margin: auto !important;
    padding: 36px 32px !important;

    border-radius: 20px !important;
}

/* Ocultar datos de pie que sobran cuando el contenido está bloqueado */
.circuit-strategy-panel:has(.strategy-locked-state) .strategy-footer {
    display: none !important;
}

/* Cabecera más limpia */
.circuit-strategy-panel .strategy-header {
    width: 100% !important;
}

.circuit-strategy-panel .strategy-header h2 {
    font-size: 22px !important;
}

/* Ya no mostramos formato de carrera en estrategia */
.strategy-race-mode {
    display: none !important;
}

/* Paneles inferiores más uniformes */
.detail-grid {
    gap: 18px !important;
    align-items: stretch !important;
}

.detail-panel {
    height: 100% !important;
}

/* Datos de pista */
.detail-stats {
    gap: 10px !important;
}

.detail-stat {
    min-height: 78px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.detail-stat small {
    display: block !important;
    margin-bottom: 5px !important;

    font-size: 10px !important;
    letter-spacing: .06em !important;
}

/* Calculadora */
.race-options {
    gap: 9px !important;
}

.race-option {
    min-height: 58px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.race-result {
    min-height: 112px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Responsive */
@media (max-width: 1250px) {

    .circuit-top-layout {
        grid-template-columns: 1fr !important;
    }

    .circuit-detail-hero {
        aspect-ratio: 16 / 9 !important;
        max-height: 520px !important;
    }

    .circuit-strategy-panel .strategy-locked-state {
        width: min(600px, 100%) !important;
    }
}

@media (max-width: 700px) {

    .circuit-detail-hero {
        aspect-ratio: 1 / 1 !important;
        max-height: none !important;
    }

    .circuit-strategy-panel {
        padding: 18px !important;
    }

    .circuit-strategy-panel .strategy-locked-state {
        width: 100% !important;
        padding: 30px 20px !important;
    }

    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .race-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   ESTRATEGIA PREMIUM - BLOQUE DEFINITIVO
========================================= */

/* La estrategia ya no depende del porcentaje */
.strategy-race-mode {
    display: none !important;
}

/* Contenedor exterior: NO SE MUEVE */
.strategy-text:has(.strategy-locked-state) {
    min-height: 0 !important;
    margin-top: 18px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
}

/* Tarjeta Premium */
.strategy-text .strategy-locked-state {
    position: relative !important;

    width: min(620px, 88%) !important;
    max-width: 620px !important;
    min-height: 300px !important;

    margin: 0 auto !important;
    padding: 30px 30px 34px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(0,0,0,0.30)
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,0.10)
        ) !important;

    box-shadow:
        0 20px 55px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.035) !important;

    transform: none !important;
}

/* CANDADO: se mueve SOLO el candado */
.strategy-text .strategy-locked-state .strategy-lock-icon {
    position: relative !important;

    top: -10px !important;

    width: 62px !important;
    height: 62px !important;

    margin: 0 auto 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;

    border-radius: 18px !important;

    font-size: 30px !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            rgba(255,255,255,0.02)
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            transparent
        ) !important;

    box-shadow:
        0 0 24px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        ) !important;

    transform: none !important;
}

/* TÍTULO */
.strategy-text .strategy-locked-state > strong {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.09em !important;

    text-align: center !important;
}

/* DESCRIPCIÓN */
.strategy-text .strategy-locked-state > p {
    width: 100% !important;
    max-width: 380px !important;

    margin: 22px auto 0 !important;

    color: rgba(255,255,255,0.62) !important;

    font-size: 12.5px !important;
    line-height: 1.65 !important;

    text-align: center !important;
}

/* BOTÓN */
.strategy-text .strategy-locked-state > .main-button {
    width: 300px !important;
    max-width: 100% !important;
    height: 48px !important;

    margin: 26px auto 0 !important;
    padding: 0 20px !important;

    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    border-radius: 12px !important;
}

/* Cuando está bloqueado no necesitamos pie inferior */
.circuit-strategy-panel:has(.strategy-locked-state) .strategy-footer {
    display: none !important;
}

/* MÓVIL */
@media (max-width: 480px) {

    .strategy-text .strategy-locked-state {
        width: 100% !important;
        min-height: 280px !important;
        padding: 28px 18px 28px !important;
    }

    .strategy-text .strategy-locked-state .strategy-lock-icon {
        top: -8px !important;
        width: 58px !important;
        height: 58px !important;
        font-size: 27px !important;
        margin-bottom: 10px !important;
    }

    .strategy-text .strategy-locked-state > strong {
        font-size: 15px !important;
    }

    .strategy-text .strategy-locked-state > p {
        font-size: 12px !important;
    }

    .strategy-text .strategy-locked-state > .main-button {
        width: 100% !important;
        max-width: 290px !important;
    }
}

.strategy-lock-icon {
    position: relative !important;
    top: -1px !important;
    transform: none !important;
    z-index: 20 !important;
}

/* =========================================
   PREMIUM V2 - DOS PLANES + UPGRADE
========================================= */

#page-premium {
    --premium-color: var(--team-primary, #ff69b4);
    --premium-pro-color: #f4c542;
    position: relative;
    padding-bottom: 55px;
}

#page-premium .page-heading {
    position: relative;
    z-index: 2;
}

.premium-current-plan {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 760px;
    margin: 28px auto 0;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}

.premium-current-plan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    background: color-mix(in srgb, var(--premium-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--premium-color) 24%, transparent);
    font-size: 20px;
}

.premium-current-plan div {
    min-width: 0;
}

.premium-current-plan small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.premium-current-plan strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.premium-current-plan p {
    margin-top: 4px;
    color: rgba(255,255,255,.50);
    font-size: 12px;
    line-height: 1.45;
}

.premium-plans-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 1050px;
    margin: 30px auto 0;
    align-items: stretch;
}

.premium-plan-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--premium-color) 24%, rgba(255,255,255,.08));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--premium-color) 11%, transparent), transparent 36%),
        linear-gradient(145deg, rgba(22,22,22,.98), rgba(10,10,10,.98));
    box-shadow: 0 25px 70px rgba(0,0,0,.34);
}

.premium-plan-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    width: 64%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--premium-color), transparent);
    opacity: .85;
}

.premium-plan-card-pro {
    border-color: rgba(244,197,66,.42);
    background:
        radial-gradient(circle at 100% 0%, rgba(244,197,66,.13), transparent 38%),
        linear-gradient(145deg, rgba(25,22,14,.98), rgba(10,10,10,.98));
    box-shadow: 0 25px 75px rgba(0,0,0,.38), 0 0 35px rgba(244,197,66,.06);
}

.premium-plan-card-pro::before {
    background: linear-gradient(90deg, transparent, var(--premium-pro-color), transparent);
}

.premium-plan-recommended {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 14px;
    border-radius: 0 23px 0 14px;
    background: var(--premium-pro-color);
    color: #151108;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.3px;
}

.premium-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.premium-plan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--premium-color);
    border: 1px solid color-mix(in srgb, var(--premium-color) 42%, transparent);
    background: color-mix(in srgb, var(--premium-color) 9%, transparent);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.5px;
}

.premium-plan-badge-pro {
    color: var(--premium-pro-color);
    border-color: rgba(244,197,66,.42);
    background: rgba(244,197,66,.08);
}

.premium-plan-icon {
    font-size: 27px;
}

.premium-plan-card h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.05;
}

.premium-plan-description {
    min-height: 44px;
    margin: 9px 0 0;
    color: rgba(255,255,255,.54);
    font-size: 13px;
    line-height: 1.55;
}

.premium-plan-price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin-top: 28px;
}

.premium-plan-price span {
    margin-top: 9px;
    color: rgba(255,255,255,.58);
    font-size: 16px;
    font-weight: 850;
}

.premium-plan-price strong {
    color: #fff;
    font-size: 58px;
    font-weight: 950;
    line-height: .95;
    letter-spacing: -2px;
}

.premium-plan-payment-type {
    margin: 9px 0 0;
    text-align: center;
    color: rgba(255,255,255,.36);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.premium-plan-benefits {
    display: grid;
    gap: 10px;
    margin: 27px 0 25px;
}

.premium-plan-benefits > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.022);
    color: rgba(255,255,255,.79);
    font-size: 12px;
    font-weight: 650;
}

.premium-plan-benefits > div span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--premium-color);
    background: color-mix(in srgb, var(--premium-color) 11%, transparent);
    font-size: 11px;
    font-weight: 950;
}

.premium-plan-card-pro .premium-plan-benefits > div span,
.premium-plan-benefit-highlight span {
    color: var(--premium-pro-color);
    background: rgba(244,197,66,.10);
}

.premium-plan-benefit-disabled {
    opacity: .34;
}

.premium-plan-benefit-disabled span {
    color: #aaa !important;
    background: rgba(255,255,255,.05) !important;
}

.premium-plan-benefit-highlight {
    border-color: rgba(244,197,66,.22) !important;
    background: rgba(244,197,66,.045) !important;
    color: #fff !important;
}

.premium-plan-button {
    width: 100%;
    min-height: 50px;
    margin-top: auto;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: var(--premium-color);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.1px;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.premium-plan-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--premium-color) 24%, transparent);
}

.premium-plan-button-pro {
    background: var(--premium-pro-color);
    color: #171208;
}

.premium-plan-button-pro:hover {
    box-shadow: 0 10px 28px rgba(244,197,66,.18);
}

.premium-paypal-area {
    width: 100%;
    min-height: 0;
    margin-top: 13px;
}

.premium-upgrade-section {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 20px;
    align-items: center;
    max-width: 1050px;
    margin: 24px auto 0;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(244,197,66,.25);
    background:
        radial-gradient(circle at 0% 50%, rgba(244,197,66,.09), transparent 32%),
        linear-gradient(145deg, rgba(23,21,14,.97), rgba(11,11,11,.98));
}

.premium-upgrade-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: rgba(244,197,66,.09);
    border: 1px solid rgba(244,197,66,.20);
    font-size: 23px;
}

.premium-upgrade-content small {
    color: var(--premium-pro-color);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.5px;
}

.premium-upgrade-content h2 {
    margin: 5px 0 0;
    font-size: 20px;
}

.premium-upgrade-content p {
    max-width: 520px;
    margin-top: 6px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    line-height: 1.5;
}

.premium-upgrade-price {
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
    gap: 4px;
    min-width: 92px;
}

.premium-upgrade-price span {
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 800;
}

.premium-upgrade-price strong {
    font-size: 31px;
    line-height: 1;
}

.premium-upgrade-price small {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.34);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.premium-upgrade-button {
    width: auto;
    min-width: 170px;
    margin-top: 0;
    background: var(--premium-pro-color);
    color: #171208;
}

.premium-upgrade-section .premium-paypal-area {
    grid-column: 2 / -1;
    margin-top: 0;
}

#page-premium .premium-payment-message {
    display: none;
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 20px auto 0;
    padding: 13px 16px;
    border-radius: 13px;
    text-align: center;
    font-size: 12px;
    font-weight: 750;
}

#page-premium .premium-security-note {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 22px auto 0;
    color: rgba(255,255,255,.31);
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 900px) {
    .premium-plans-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .premium-upgrade-section {
        grid-template-columns: auto 1fr auto;
    }

    .premium-upgrade-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .premium-upgrade-section .premium-paypal-area {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    #page-premium {
        padding-bottom: 40px;
    }

    .premium-current-plan {
        margin-top: 22px;
        padding: 14px;
    }

    .premium-plans-grid {
        gap: 16px;
        margin-top: 22px;
    }

    .premium-plan-card {
        padding: 23px 18px;
        border-radius: 20px;
    }

    .premium-plan-card h2 {
        font-size: 26px;
    }

    .premium-plan-description {
        min-height: 0;
    }

    .premium-plan-price strong {
        font-size: 49px;
    }

    .premium-upgrade-section {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 22px 18px;
    }

    .premium-upgrade-icon {
        margin: 0 auto;
    }

    .premium-upgrade-price {
        justify-content: center;
    }

    .premium-upgrade-button {
        min-width: 0;
    }

    .premium-upgrade-section .premium-paypal-area {
        grid-column: 1;
    }
}

/* =========================================
   SEGURIDAD VISUAL ADMIN / USUARIOS
   MÓVIL + TABLET + ESCRITORIO
========================================= */

#navAdmin.hidden,
#navUsers.hidden,
.menu-item.hidden {
    display: none !important;
}


/* =========================================================
   MIS ESTADÍSTICAS - DISEÑO PREMIUM DINÁMICO
   Usa el color real de la escudería seleccionada:
   --team-primary / --team-secondary
   ========================================================= */

body #page-history {
    --stats-accent: var(--team-primary, #00d2be);
    --stats-accent-2: var(--team-secondary, #061816);
    --stats-card: #0c1219;
    --stats-card-soft: #091017;
    --stats-border: rgba(255,255,255,0.09);
    --stats-muted: rgba(255,255,255,0.56);
    --stats-accent-soft:
        color-mix(
            in srgb,
            var(--team-primary, #00d2be) 12%,
            transparent
        );
    --stats-accent-border:
        color-mix(
            in srgb,
            var(--team-primary, #00d2be) 38%,
            rgba(255,255,255,0.08)
        );
    --stats-accent-glow:
        color-mix(
            in srgb,
            var(--team-primary, #00d2be) 26%,
            transparent
        );
}


/* =========================================================
   ESTRUCTURA GENERAL
   ========================================================= */

body #page-history .stats-shell {
    display: grid;
    gap: 16px;
}

body #page-history .stats-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    padding: 2px 0 4px;
}

body #page-history .stats-head h1 {
    margin: 4px 0 0;
    font-size: clamp(28px, 2.3vw, 38px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.035em;
}

body #page-history .stats-head p {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 13px;
}

body #page-history .stats-kicker {
    color: var(--stats-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-shadow:
        0 0 16px
        var(--stats-accent-glow);
}


/* =========================================================
   BOTONES
   ========================================================= */

body #page-history .stats-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body #page-history .stats-primary,
body #page-history .stats-secondary,
body #page-history .stats-danger {
    min-height: 42px;
    padding: 11px 16px;
    border-radius: 11px;
    font-weight: 900;
    letter-spacing: 0.025em;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

body #page-history .stats-primary {
    border: 1px solid var(--stats-accent);
    background: var(--stats-accent);
    color: #050808;

    box-shadow:
        0 8px 25px
        var(--stats-accent-glow);
}

body #page-history .stats-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 11px 30px
        var(--stats-accent-glow);
}

body #page-history .stats-secondary {
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.04);
    color: #ffffff;
}

body #page-history .stats-secondary:hover {
    border-color: var(--stats-accent-border);

    background:
        color-mix(
            in srgb,
            var(--stats-accent) 7%,
            #11161d
        );
}

body #page-history .stats-danger {
    border: 1px solid rgba(255,88,88,0.35);
    background: rgba(255,88,88,0.06);
    color: #ff8c8c;
}


/* =========================================================
   TARJETA PRINCIPAL DEL PILOTO
   ========================================================= */

body #page-history .stats-driver-card {
    min-height: 132px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;

    position: relative;
    overflow: hidden;

    padding: 20px;

    border:
        1px solid
        var(--stats-accent-border);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 12% 50%,
            color-mix(
                in srgb,
                var(--stats-accent) 15%,
                transparent
            ),
            transparent 36%
        ),
        linear-gradient(
            108deg,
            color-mix(
                in srgb,
                var(--stats-accent) 7%,
                #091016
            ),
            #0b1118 46%,
            #080d13 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 15px 36px rgba(0,0,0,0.24);
}

body #page-history .stats-driver-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 46%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--stats-accent),
            transparent
        );

    opacity: 0.85;

    box-shadow:
        0 0 18px
        var(--stats-accent-glow);
}

body #page-history .stats-driver-card::after {
    content: attr(data-driver-number);

    position: absolute;
    right: -8px;
    bottom: -43px;

    font-size: 150px;
    line-height: 1;
    font-weight: 1000;
    font-style: italic;

    color:
        color-mix(
            in srgb,
            var(--stats-accent) 7%,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   FOTO DEL PILOTO
   ========================================================= */

body #page-history .stats-driver-photo,
body #page-history .stats-driver-photo-placeholder {
    width: 88px;
    height: 88px;

    border-radius: 17px;

    flex-shrink: 0;
}

body #page-history .stats-driver-photo {
    object-fit: cover;

    border:
        1px solid
        var(--stats-accent-border);

    background: #080d12;

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--stats-accent) 6%,
            transparent
        ),
        0 10px 26px rgba(0,0,0,0.35);
}

body #page-history .stats-driver-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px dashed
        var(--stats-accent-border);

    background:
        color-mix(
            in srgb,
            var(--stats-accent) 7%,
            #080d12
        );

    color: var(--stats-accent);
    font-size: 30px;

    box-shadow:
        inset 0 0 30px
        color-mix(
            in srgb,
            var(--stats-accent) 5%,
            transparent
        );
}


/* =========================================================
   NOMBRE / NÚMERO / CONTEXTO
   ========================================================= */

body #page-history .stats-driver-name {
    position: relative;
    z-index: 1;

    font-size: clamp(23px, 2vw, 29px);
    font-weight: 950;
    letter-spacing: -0.035em;
}

body #page-history .stats-driver-number {
    color: var(--stats-accent);

    text-shadow:
        0 0 20px
        var(--stats-accent-glow);
}

body #page-history .stats-driver-context {
    position: relative;
    z-index: 1;

    margin-top: 6px;

    color: rgba(255,255,255,0.58);
    font-size: 12px;
}


/* =========================================================
   CONTADORES DE LA TARJETA DEL PILOTO
   ========================================================= */

body #page-history .stats-driver-summary {
    display: flex;
    align-items: stretch;
    gap: 0;

    position: relative;
    z-index: 1;
}

body #page-history .stats-driver-summary div {
    min-width: 82px;

    padding: 11px 13px;

    text-align: center;

    border-left:
        1px solid
        rgba(255,255,255,0.07);
}

body #page-history .stats-driver-summary div:first-child {
    border-left: 0;
}

body #page-history .stats-driver-summary strong {
    display: block;

    color: #ffffff;

    font-size: 27px;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}

body #page-history .stats-driver-summary span {
    display: block;

    margin-top: 7px;

    color: rgba(255,255,255,0.5);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.09em;
}


/* =========================================================
   FILTROS
   ========================================================= */

body #page-history .stats-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

body #page-history .stats-field {
    display: grid;
    gap: 6px;
}

body #page-history .stats-field label {
    color: rgba(255,255,255,0.58);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

body #page-history .stats-field select,
body #page-history .stats-field input {
    width: 100%;
    min-height: 44px;

    padding: 11px 13px;

    outline: none;

    border:
        1px solid
        rgba(255,255,255,0.105);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(16,22,29,0.97),
            rgba(10,15,21,0.97)
        );

    color: #ffffff;
    color-scheme: dark;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

body #page-history .stats-field select:hover,
body #page-history .stats-field input:hover {
    border-color:
        var(--stats-accent-border);
}

body #page-history .stats-field select:focus,
body #page-history .stats-field input:focus {
    border-color:
        var(--stats-accent);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--stats-accent) 11%,
            transparent
        );
}


/* =========================================================
   PANELES
   ========================================================= */

body #page-history .stats-panel {
    position: relative;
    overflow: hidden;

    padding: 18px;

    border:
        1px solid
        var(--stats-border);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(13,19,26,0.97),
            rgba(8,13,18,0.94)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02),
        0 10px 30px rgba(0,0,0,0.13);
}

body #page-history .stats-panel::before {
    content: "";

    position: absolute;
    top: 0;
    left: 18px;

    width: 76px;
    height: 1px;

    background: var(--stats-accent);

    box-shadow:
        0 0 14px
        var(--stats-accent-glow);

    opacity: 0.72;
}

body #page-history .stats-panel h3 {
    position: relative;

    margin: 0 0 15px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.095em;
}


/* =========================================================
   PRÓXIMAS CARRERAS POR LIGA
   ========================================================= */

body #page-history .stats-next-list {
    display: grid;
    gap: 9px;
}

body #page-history .stats-next-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;

    min-height: 61px;

    padding: 13px 15px;

    border:
        1px solid
        rgba(255,255,255,0.075);

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--stats-accent) 6%,
                #091016
            ),
            #091016
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

body #page-history .stats-next-row:hover {
    transform: translateY(-1px);

    border-color:
        var(--stats-accent-border);
}

body #page-history .stats-next-row strong {
    display: block;

    color: #ffffff;

    font-size: 14px;
}

body #page-history .stats-next-row small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,0.52);
}

body #page-history .stats-next-row time {
    color: var(--stats-accent);

    font-size: 12px;
    font-weight: 950;

    text-align: right;
}


/* =========================================================
   TARJETAS DE MÉTRICAS
   ========================================================= */

body #page-history .stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

body #page-history .stats-card {
    position: relative;
    overflow: hidden;

    min-height: 92px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 16px;

    border:
        1px solid
        var(--stats-border);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(13,19,26,0.97),
            rgba(8,13,18,0.95)
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body #page-history .stats-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--stats-accent),
            transparent
        );

    opacity: 0.35;
}

body #page-history .stats-card::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    transform: scaleX(0);
    transform-origin: left;

    background:
        var(--stats-accent);

    transition:
        transform 0.25s ease;
}

body #page-history .stats-card:hover {
    transform: translateY(-2px);

    border-color:
        var(--stats-accent-border);

    box-shadow:
        0 8px 26px
        rgba(0,0,0,0.24);
}

body #page-history .stats-card:hover::after {
    transform: scaleX(1);
}

body #page-history .stats-card strong {
    display: block;

    color: #ffffff;

    font-size: 28px;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}

body #page-history .stats-card span {
    display: block;

    margin-top: 8px;

    color: rgba(255,255,255,0.52);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.095em;
}


/* =========================================================
   RENDIMIENTO + ÚLTIMA CARRERA
   ========================================================= */

body #page-history .stats-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

body #page-history .stats-performance {
    display: grid;
    gap: 13px;
}

body #page-history .stats-bar-row {
    display: grid;
    grid-template-columns: 82px 1fr 55px;
    gap: 11px;
    align-items: center;

    font-size: 11px;
}

body #page-history .stats-bar {
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.075);

    box-shadow:
        inset 0 1px 2px
        rgba(0,0,0,0.42);
}

body #page-history .stats-bar i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--stats-accent) 78%,
                white
            ),
            var(--stats-accent)
        );

    box-shadow:
        0 0 12px
        var(--stats-accent-glow);
}

body #page-history .stats-latest {
    display: grid;
    gap: 12px;
}

body #page-history .stats-latest-main {
    color: #ffffff;

    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

body #page-history .stats-latest-track {
    min-height: 145px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.075);

    border-radius: 13px;

    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--stats-accent) 10%,
                transparent
            ),
            transparent 63%
        ),
        rgba(7,11,16,0.74);
}

body #page-history .stats-latest-track img {
    display: block;

    max-width: 100%;
    max-height: 140px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0,0,0,0.45)
        );
}

body #page-history .stats-latest-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

body #page-history .stats-latest-meta small {
    display: block;

    color: rgba(255,255,255,0.48);
}

body #page-history .stats-latest-meta strong {
    color: #ffffff;
    font-size: 14px;
}


/* =========================================================
   ÚLTIMAS 5 CARRERAS
   ========================================================= */

body #page-history .stats-recent-list {
    display: grid;
}

body #page-history .stats-race-row {
    min-height: 52px;

    display: grid;
    grid-template-columns: 36px 1fr 100px 60px;
    gap: 10px;
    align-items: center;

    padding: 10px 8px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.065);

    transition:
        background 0.18s ease;
}

body #page-history .stats-race-row:hover {
    background:
        color-mix(
            in srgb,
            var(--stats-accent) 4%,
            transparent
        );
}

body #page-history .stats-race-row:last-child {
    border-bottom: 0;
}


/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */

body #page-history .stats-empty {
    padding: 28px;

    color: rgba(255,255,255,0.52);

    text-align: center;
    font-size: 13px;
}


/* =========================================================
   MODAL GESTIONAR ESTADÍSTICAS
   ========================================================= */

body #page-history .stats-modal {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background:
        rgba(0,0,0,0.84);

    backdrop-filter:
        blur(7px);
}

body #page-history .stats-modal.hidden {
    display: none;
}

body #page-history .stats-modal-card {
    width: min(1050px, 100%);
    max-height: 92vh;

    overflow: auto;

    padding: 21px;

    border:
        1px solid
        var(--stats-accent-border);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0c1219,
            #080d12
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.62);
}

body #page-history .stats-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 16px;
}

body #page-history .stats-modal-head h2 {
    margin: 3px 0;
}

body #page-history .stats-modal-close {
    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    border-radius: 10px;

    background:
        rgba(255,255,255,0.025);

    color: #ffffff;

    font-size: 20px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

body #page-history .stats-modal-close:hover {
    border-color:
        var(--stats-accent);

    color:
        var(--stats-accent);

    background:
        var(--stats-accent-soft);
}


/* =========================================================
   GESTIÓN
   ========================================================= */

body #page-history .stats-management-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

body #page-history .stats-management-section {
    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 15px;

    background:
        rgba(10,15,21,0.74);
}

body #page-history .stats-management-section.full {
    grid-column: 1 / -1;
}

body #page-history .stats-management-section h3 {
    margin: 0 0 14px;

    color: var(--stats-accent);

    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

body #page-history .stats-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

body #page-history .stats-form-wide {
    grid-column: 1 / -1;
}

body #page-history .stats-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

body #page-history .stats-inline select {
    flex: 1;
    min-width: 0;
}

body #page-history .stats-checks {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;

    padding: 8px 0;
}

body #page-history .stats-checks label {
    font-size: 12px;
    font-weight: 800;
}

body #page-history .stats-form-status {
    min-height: 20px;

    margin-top: 10px;

    font-size: 12px;
}

body #page-history .stats-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;

    margin-top: 14px;
}


/* =========================================================
   TIEMPO DE VUELTA
   ========================================================= */

body #page-history .stats-lap-time {
    display: flex;
    align-items: center;
    gap: 7px;
}

body #page-history .stats-lap-time input:not([type="hidden"]) {
    width: 58px !important;
    min-width: 0;

    text-align: center;

    font-variant-numeric:
        tabular-nums;
}

body #page-history .stats-lap-time input#raceBestLapMilliseconds {
    width: 72px !important;
}

body #page-history .stats-lap-time span {
    color: rgba(255,255,255,0.7);

    font-size: 20px;
    font-weight: 900;
}


/* =========================================================
   LISTADOS DEL PANEL DE GESTIÓN
   ========================================================= */

body #page-history .stats-manage-list {
    display: grid;
    gap: 8px;

    margin-top: 12px;
}

body #page-history .stats-manage-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;

    padding: 11px 13px;

    border:
        1px solid
        rgba(255,255,255,0.075);

    border-radius: 11px;

    background:
        rgba(8,12,17,0.8);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

body #page-history .stats-manage-item:hover {
    border-color:
        var(--stats-accent-border);

    background:
        color-mix(
            in srgb,
            var(--stats-accent) 4%,
            #081017
        );
}

body #page-history .stats-manage-item strong {
    display: block;
}

body #page-history .stats-manage-item small {
    color: rgba(255,255,255,0.52);
}

body #page-history .stats-manage-actions {
    display: flex;
    gap: 6px;
}


/* =========================================================
   PREVIEW DE PERFIL
   ========================================================= */

body #page-history .stats-profile-preview {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 12px;
}

body #page-history .stats-profile-preview img {
    width: 68px;
    height: 68px;

    border-radius: 14px;

    object-fit: cover;

    border:
        1px solid
        var(--stats-accent-border);
}


/* =========================================================
   BLOQUEO PREMIUM
   ========================================================= */

body #page-history .stats-locked {
    padding: 42px 18px;

    text-align: center;
}

body #page-history .stats-locked .lock {
    font-size: 42px;
}

body #page-history .stats-locked h2 {
    margin: 10px 0 6px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    body #page-history .stats-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    body #page-history .stats-main-grid,
    body #page-history .stats-management-grid {
        grid-template-columns:
            1fr;
    }

    body #page-history .stats-management-section.full {
        grid-column:
            auto;
    }

    body #page-history .stats-driver-card {
        grid-template-columns:
            auto
            1fr;
    }

    body #page-history .stats-driver-summary {
        grid-column:
            1 / -1;

        justify-content:
            flex-start;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {

    body #page-history .stats-shell {
        gap:
            12px;
    }

    body #page-history .stats-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    body #page-history .stats-actions-row {
        width:
            100%;
    }

    body #page-history .stats-actions-row .stats-primary {
        width:
            100%;
    }

    body #page-history .stats-filters,
    body #page-history .stats-form-grid {
        grid-template-columns:
            1fr;
    }

    body #page-history .stats-form-wide {
        grid-column:
            auto;
    }

    body #page-history .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    body #page-history .stats-card {
        min-height:
            82px;
    }

    body #page-history .stats-main-grid {
        grid-template-columns:
            1fr;
    }

    body #page-history .stats-driver-card {
        grid-template-columns:
            1fr;

        text-align:
            center;

        padding:
            18px 14px;
    }

    body #page-history .stats-driver-photo,
    body #page-history .stats-driver-photo-placeholder {
        margin:
            auto;
    }

    body #page-history .stats-driver-summary {
        justify-content:
            center;

        flex-wrap:
            wrap;
    }

    body #page-history .stats-driver-summary div {
        min-width:
            74px;
    }

    body #page-history .stats-driver-card::after {
        font-size:
            110px;

        bottom:
            -28px;
    }

    body #page-history .stats-next-row {
        grid-template-columns:
            1fr;
    }

    body #page-history .stats-next-row time {
        text-align:
            left;
    }

    body #page-history .stats-race-row {
        grid-template-columns:
            30px
            1fr
            55px;
    }

    body #page-history .stats-race-row .lap {
        display:
            none;
    }

    body #page-history .stats-panel {
        padding:
            15px;
    }

    body #page-history .stats-modal {
        padding:
            10px;
    }

    body #page-history .stats-modal-card {
        padding:
            15px;

        border-radius:
            15px;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

    body #page-history .stats-card {
        padding:
            14px;
    }

    body #page-history .stats-card strong {
        font-size:
            24px;
    }

    body #page-history .stats-driver-name {
        font-size:
            22px;
    }

    body #page-history .stats-driver-summary {
        gap:
            0;
    }

    body #page-history .stats-lap-time input:not([type="hidden"]) {
        width:
            52px !important;
    }

    body #page-history .stats-lap-time input#raceBestLapMilliseconds {
        width:
            66px !important;
    }
}


/* =========================================================
   INICIO - WIDGETS PERSONALIZADOS DE ESTADÍSTICAS
   ========================================================= */

.home-statistics-widgets {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 22px;
}

.home-stat-widget {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 34%,
            #2b2b2b
        );
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 8% 50%,
            color-mix(
                in srgb,
                var(--team-primary) 12%,
                transparent
            ),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #101010
            ),
            #101010 50%,
            #0b0b0b
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 32px rgba(0,0,0,.18);
}

.home-stat-widget-accent {
    position: absolute;
    top: 0;
    left: 22px;
    width: 90px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: var(--team-primary);
    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            transparent
        );
}

.home-stat-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.home-stat-widget-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--team-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
}

.home-stat-widget-head h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.home-stat-widget-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            #2b2b2b
        );
    border-radius: 11px;
    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #111
        );
    font-size: 19px;
}

.home-next-race-content {
    min-width: 0;
}

.home-next-race-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto;
    gap: 20px;
    align-items: center;
}

.home-next-race-track {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.home-next-race-flag {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(0,0,0,.24);
    font-size: 25px;
}

.home-next-race-track strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 950;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-next-race-track span {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-next-race-datetime {
    min-width: 155px;
    padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,.08);
}

.home-next-race-datetime small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
}

.home-next-race-datetime strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-transform: capitalize;
}

.home-next-race-datetime span {
    display: block;
    margin-top: 4px;
    color: var(--team-primary);
    font-size: 15px;
    font-weight: 950;
}

.home-next-race-button {
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid var(--team-primary);
    border-radius: 10px;
    background: var(--team-primary);
    color: #050505;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .07em;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.home-next-race-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--team-primary) 24%,
            transparent
        );
}

.home-next-race-loading,
.home-next-race-empty {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-next-race-loading {
    color: rgba(255,255,255,.48);
    font-size: 12px;
}

.home-next-race-empty strong {
    color: #fff;
    font-size: 14px;
}

.home-next-race-empty span {
    margin-top: 5px;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    line-height: 1.45;
}

.home-next-race-empty .home-next-race-button {
    width: max-content;
    margin-top: 12px;
}

.home-stat-widget.is-locked {
    border-color: rgba(255,255,255,.08);
}

.home-stat-widget.is-locked .home-stat-widget-accent {
    opacity: .45;
}

@media (max-width: 850px) {

    .home-next-race-main {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .home-next-race-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 600px) {

    .home-statistics-widgets {
        margin-top: 16px;
    }

    .home-stat-widget {
        padding: 17px;
        border-radius: 14px;
    }

    .home-stat-widget-accent {
        left: 17px;
    }

    .home-next-race-main {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .home-next-race-track strong,
    .home-next-race-track span {
        white-space: normal;
    }

    .home-next-race-datetime {
        min-width: 0;
        padding-top: 13px;
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        border-left: 0;
    }

    .home-next-race-button {
        grid-column: auto;
    }
}


/* =========================================================
   ESTADÍSTICAS - CONTROLES PARA MOSTRAR EN INICIO
   ========================================================= */

#page-history .stats-panel-title-row {
    min-height: 30px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 14px;
}

#page-history .stats-panel-title-row h3 {
    margin: 0;
}

#page-history .stats-home-widget-button {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 9px;

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.58);

    font-size: 14px;

    cursor: pointer;

    transition:
        transform .18s ease,
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

#page-history .stats-home-widget-button:hover {
    transform:
        translateY(-1px);

    color:
        #ffffff;

    border-color:
        var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #111
        );
}

#page-history .stats-home-widget-button.is-active {
    color:
        #050505;

    border-color:
        var(--team-primary);

    background:
        var(--team-primary);

    box-shadow:
        0 0 15px
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            transparent
        );
}


/* RESUMEN */

#page-history .stats-summary-block {
    display: grid;
    gap: 8px;
}

#page-history .stats-summary-title-row {
    margin:
        0;
}

#page-history .stats-summary-title-row h3 {
    font-size: 11px;
    letter-spacing: .09em;
    opacity: .72;
}


/* TOAST */

.statistics-widget-toast {
    position: fixed;

    left: 50%;
    bottom: 28px;

    z-index: 30000;

    max-width:
        min(420px, calc(100vw - 28px));

    padding:
        11px 15px;

    transform:
        translate(-50%, 18px);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            rgba(255,255,255,.12)
        );

    border-radius:
        11px;

    background:
        #11161d;

    color:
        #ffffff;

    box-shadow:
        0 16px 45px
        rgba(0,0,0,.55);

    font-size:
        12px;

    font-weight:
        800;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.statistics-widget-toast.show {
    opacity:
        1;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   INICIO - WIDGETS DINÁMICOS
   ========================================================= */

#page-home .home-statistics-widgets {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;

    margin-top:
        22px;
}

#page-home .home-statistics-widgets.hidden {
    display:
        none !important;
}

#page-home .home-stat-widget {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,.08)
        );

    border-radius:
        16px;

    background:
        radial-gradient(
            circle at 8% 0%,
            color-mix(
                in srgb,
                var(--team-primary) 9%,
                transparent
            ),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #11161c,
            #0a0e13
        );

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.18);
}

#page-home .home-stat-widget[data-widget="nextRace"],
#page-home .home-stat-widget[data-widget="recentRaces"] {
    grid-column:
        1 / -1;
}

#page-home .home-stat-widget-accent {
    position:
        absolute;

    top:
        0;

    left:
        18px;

    width:
        72px;

    height:
        2px;

    background:
        var(--team-primary);

    box-shadow:
        0 0 16px
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            transparent
        );
}

#page-home .home-stat-widget-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        15px;
}

#page-home .home-stat-widget-kicker {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--team-primary);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .14em;
}

#page-home .home-stat-widget-head h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        950;
}

#page-home .home-stat-widget-open {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.03);

    color:
        var(--team-primary);

    cursor:
        pointer;
}

#page-home .home-stat-widget-body {
    min-width:
        0;
}


/* PRÓXIMA CARRERA */

#page-home .home-stats-next-races {
    display:
        grid;

    gap:
        8px;
}

#page-home .home-stats-next-races .stats-next-row {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        12px;

    align-items:
        center;

    padding:
        12px 13px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        11px;

    background:
        rgba(0,0,0,.18);
}

#page-home .home-stats-next-races .stats-next-row strong,
#page-home .home-stats-next-races .stats-next-row small {
    display:
        block;
}

#page-home .home-stats-next-races .stats-next-row small {
    margin-top:
        3px;

    color:
        rgba(255,255,255,.48);

    font-size:
        11px;
}

#page-home .home-stats-next-races .stats-next-row time {
    color:
        var(--team-primary);

    font-size:
        11px;

    font-weight:
        900;

    text-align:
        right;
}


/* RESUMEN */

#page-home .home-stats-summary-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        8px;
}

#page-home .home-stats-summary-item {
    min-width:
        0;

    padding:
        11px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        10px;

    background:
        rgba(0,0,0,.18);
}

#page-home .home-stats-summary-item strong {
    display:
        block;

    color:
        #ffffff;

    font-size:
        21px;

    line-height:
        1;
}

#page-home .home-stats-summary-item span {
    display:
        block;

    margin-top:
        6px;

    color:
        rgba(255,255,255,.48);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


/* RENDIMIENTO */

#page-home .home-stats-performance {
    display:
        grid;

    gap:
        10px;
}

#page-home .home-stats-performance .stats-bar-row {
    display:
        grid;

    grid-template-columns:
        70px 1fr 46px;

    gap:
        9px;

    align-items:
        center;

    font-size:
        10px;
}

#page-home .home-stats-performance .stats-bar {
    height:
        6px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.07);
}

#page-home .home-stats-performance .stats-bar i {
    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--team-primary);
}


/* ÚLTIMA CARRERA */

#page-home .home-stats-latest {
    display:
        grid;

    gap:
        10px;
}

#page-home .home-stats-latest .stats-latest-main {
    color:
        #ffffff;

    font-size:
        19px;

    font-weight:
        900;
}

#page-home .home-stats-latest .stats-latest-track {
    min-height:
        120px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        11px;

    background:
        rgba(0,0,0,.18);
}

#page-home .home-stats-latest .stats-latest-track img {
    display:
        block;

    max-width:
        100%;

    max-height:
        115px;

    object-fit:
        contain;
}

#page-home .home-stats-latest .stats-latest-meta {
    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;
}

#page-home .home-stats-latest .stats-latest-meta small {
    display:
        block;

    color:
        rgba(255,255,255,.45);

    font-size:
        9px;
}

#page-home .home-stats-latest .stats-latest-meta strong {
    color:
        #ffffff;

    font-size:
        12px;
}


/* ÚLTIMAS 5 */

#page-home .home-stats-recent .stats-race-row {
    display:
        grid;

    grid-template-columns:
        30px 1fr 88px 52px;

    gap:
        8px;

    align-items:
        center;

    padding:
        9px 4px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);

    font-size:
        11px;
}

#page-home .home-stats-recent .stats-race-row:last-child {
    border-bottom:
        0;
}


/* ESTADOS */

#page-home .home-stat-widget .stats-empty,
#page-home .home-stat-widgets-loading,
#page-home .home-stat-widgets-error {
    padding:
        18px;

    color:
        rgba(255,255,255,.5);

    text-align:
        center;

    font-size:
        11px;
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    #page-home .home-statistics-widgets {
        grid-template-columns:
            1fr;
    }

    #page-home .home-stat-widget[data-widget] {
        grid-column:
            auto;
    }
}


/* =========================================================
   CELULARES
   ========================================================= */

@media (max-width: 650px) {

    #page-history .stats-home-widget-button {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;

        font-size:
            15px;
    }

    #page-home .home-statistics-widgets {
        gap:
            11px;

        margin-top:
            16px;
    }

    #page-home .home-stat-widget {
        padding:
            15px;

        border-radius:
            14px;
    }

    #page-home .home-stat-widget-accent {
        left:
            15px;
    }

    #page-home .home-stat-widget-head h3 {
        font-size:
            16px;
    }

    #page-home .home-stats-next-races .stats-next-row {
        grid-template-columns:
            1fr;
    }

    #page-home .home-stats-next-races .stats-next-row time {
        text-align:
            left;
    }

    #page-home .home-stats-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #page-home .home-stats-recent .stats-race-row {
        grid-template-columns:
            28px 1fr 48px;
    }

    #page-home .home-stats-recent .stats-race-row .lap {
        display:
            none;
    }
}


/* =========================================================
   DISPOSITIVOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

    #page-history .stats-panel-title-row {
        gap:
            8px;
    }

    #page-home .home-stat-widget {
        padding:
            13px;
    }

    #page-home .home-stats-summary-grid {
        grid-template-columns:
            1fr 1fr;
    }

    #page-home .home-stats-summary-item {
        padding:
            10px;
    }

    #page-home .home-stats-summary-item strong {
        font-size:
            19px;
    }

    .statistics-widget-toast {
        bottom:
            16px;
    }
}


/* =========================================================
   ESTADÍSTICAS - INTERRUPTORES "MOSTRAR EN INICIO"
   ========================================================= */

/* RESUMEN AHORA USA EL MISMO PANEL QUE LOS DEMÁS */

#page-history .stats-summary-panel {
    padding:
        18px;
}

#page-history .stats-summary-panel .stats-grid {
    margin-top:
        0;
}


/* CABECERA DE CADA PANEL */

#page-history .stats-panel-title-row {
    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        14px;
}

#page-history .stats-panel-title-row h3 {
    margin:
        0;
}


/* BOTÓN / INTERRUPTOR */

#page-history .stats-home-widget-toggle {
    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        32px;

    padding:
        5px 7px 5px 10px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.54);

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

#page-history .stats-home-widget-toggle:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 50%,
            rgba(255,255,255,.10)
        );

    color:
        #ffffff;
}

#page-history .stats-home-widget-toggle-label {
    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* PISTA DEL INTERRUPTOR */

#page-history .stats-home-widget-switch {
    position:
        relative;

    width:
        38px;

    height:
        22px;

    flex:
        0 0 38px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        999px;

    background:
        #23272d;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

#page-history .stats-home-widget-switch-dot {
    position:
        absolute;

    top:
        3px;

    left:
        3px;

    width:
        14px;

    height:
        14px;

    border-radius:
        50%;

    background:
        #8b9198;

    transition:
        transform .18s ease,
        background .18s ease;
}


/* ACTIVO */

#page-history .stats-home-widget-toggle.is-active {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            rgba(255,255,255,.10)
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            #11161d
        );

    color:
        #ffffff;

    box-shadow:
        0 0 14px
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );
}

#page-history .stats-home-widget-toggle.is-active .stats-home-widget-switch {
    border-color:
        var(--team-primary);

    background:
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            #1a1d21
        );

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        );
}

#page-history .stats-home-widget-toggle.is-active .stats-home-widget-switch-dot {
    transform:
        translateX(16px);

    background:
        var(--team-primary);
}


/* =========================================================
   RESPONSIVE - TABLETS
   ========================================================= */

@media (max-width: 900px) {

    #page-history .stats-panel-title-row {
        gap:
            10px;
    }

    #page-history .stats-home-widget-toggle {
        min-height:
            30px;

        padding:
            4px 6px 4px 9px;
    }
}


/* =========================================================
   RESPONSIVE - CELULARES
   ========================================================= */

@media (max-width: 650px) {

    #page-history .stats-summary-panel {
        padding:
            15px;
    }

    #page-history .stats-panel-title-row {
        min-height:
            32px;

        margin-bottom:
            12px;
    }

    #page-history .stats-home-widget-toggle {
        gap:
            7px;

        min-height:
            29px;

        padding:
            3px 5px 3px 8px;
    }

    #page-history .stats-home-widget-toggle-label {
        font-size:
            8px;

        letter-spacing:
            .05em;
    }

    #page-history .stats-home-widget-switch {
        width:
            34px;

        height:
            20px;

        flex-basis:
            34px;
    }

    #page-history .stats-home-widget-switch-dot {
        top:
            3px;

        left:
            3px;

        width:
            12px;

        height:
            12px;
    }

    #page-history .stats-home-widget-toggle.is-active .stats-home-widget-switch-dot {
        transform:
            translateX(14px);
    }
}


/* =========================================================
   RESPONSIVE - DISPOSITIVOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

    #page-history .stats-panel-title-row {
        align-items:
            center;
    }

    #page-history .stats-home-widget-toggle-label {
        display:
            none;
    }

    #page-history .stats-home-widget-toggle {
        padding:
            4px;

        min-width:
            44px;

        justify-content:
            center;
    }

    #page-history .stats-home-widget-switch {
        width:
            34px;

        flex-basis:
            34px;
    }
}


/* =========================================================
   INICIO - ORDEN DE WIDGETS IGUAL A MIS ESTADÍSTICAS
   ========================================================= */

/*
   Distribución:
   1. Próxima carrera      -> ancho completo
   2. Resumen              -> ancho completo
   3. Rendimiento          -> mitad izquierda
   4. Última carrera       -> mitad derecha
   5. Últimas 5 carreras   -> ancho completo
*/

#page-home .home-stat-widget[data-widget="nextRace"],
#page-home .home-stat-widget[data-widget="summary"],
#page-home .home-stat-widget[data-widget="recentRaces"] {
    grid-column: 1 / -1;
}

#page-home .home-stat-widget[data-widget="performance"],
#page-home .home-stat-widget[data-widget="latestRace"] {
    grid-column: auto;
}

/* TABLET / MÓVIL */

@media (max-width: 900px) {

    #page-home .home-statistics-widgets {
        grid-template-columns: 1fr;
    }

    #page-home .home-stat-widget[data-widget] {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   ESTADÍSTICAS - EDITAR LIGAS Y TEMPORADAS
   ========================================================= */

#page-history .stats-entity-manage-row {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        42px
        auto
        auto;

    gap:
        8px;

    align-items:
        center;
}

#page-history .stats-entity-manage-row select {
    min-width:
        0;
}

#page-history .stats-entity-action {
    min-height:
        44px;

    padding:
        9px 12px;

    white-space:
        nowrap;

    font-size:
        11px;
}

#page-history .stats-entity-add {
    width:
        42px;

    padding:
        0;

    font-size:
        19px;

    line-height:
        1;
}


/* TABLET */

@media (max-width: 1050px) {

    #page-history .stats-entity-manage-row {
        grid-template-columns:
            minmax(0, 1fr)
            40px
            auto;
    }

    #page-history .stats-entity-manage-row select {
        grid-column:
            1 / -1;
    }

    #page-history .stats-entity-action {
        width:
            100%;
    }
}


/* MÓVIL */

@media (max-width: 650px) {

    #page-history .stats-entity-manage-row {
        grid-template-columns:
            40px
            1fr
            1fr;
    }

    #page-history .stats-entity-manage-row select {
        grid-column:
            1 / -1;
    }

    #page-history .stats-entity-action {
        min-height:
            40px;

        padding:
            8px 9px;

        font-size:
            10px;
    }

    #page-history .stats-entity-add {
        width:
            40px;

        font-size:
            18px;
    }
}


/* DISPOSITIVOS PEQUEÑOS */

@media (max-width: 390px) {

    #page-history .stats-entity-manage-row {
        grid-template-columns:
            38px
            1fr
            1fr;

        gap:
            6px;
    }

    #page-history .stats-entity-action {
        padding:
            7px 6px;

        font-size:
            9px;
    }
}


/* =========================================================
   ESTADÍSTICAS - FILTROS DE CARRERAS REGISTRADAS
   ========================================================= */

#page-history .stats-manage-races-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        13px;
}

#page-history .stats-manage-races-head h3 {
    margin:
        0 0 4px;
}

#page-history .stats-manage-races-head small {
    color:
        rgba(255,255,255,.45);

    font-size:
        10px;
}


#page-history .stats-manage-race-filters {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        auto;

    gap:
        9px;

    align-items:
        end;

    margin-bottom:
        13px;

    padding:
        12px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.018);
}


#page-history .stats-manage-filter-clear {
    min-height:
        44px;

    padding:
        9px 13px;

    white-space:
        nowrap;

    font-size:
        10px;
}


#page-history .stats-manage-race-more {
    display:
        flex;

    justify-content:
        center;

    padding-top:
        12px;
}


#page-history .stats-manage-race-more.hidden {
    display:
        none !important;
}


#page-history .stats-manage-race-more .stats-secondary {
    min-width:
        150px;
}


/* TABLET */

@media (max-width: 950px) {

    #page-history .stats-manage-race-filters {
        grid-template-columns:
            1fr 1fr;
    }

    #page-history .stats-manage-filter-clear {
        width:
            100%;
    }
}


/* MÓVIL */

@media (max-width: 650px) {

    #page-history .stats-manage-race-filters {
        grid-template-columns:
            1fr;

        padding:
            10px;
    }

    #page-history .stats-manage-filter-clear {
        min-height:
            40px;
    }

    #page-history .stats-manage-item {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    #page-history .stats-manage-actions {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        width:
            100%;
    }

    #page-history .stats-manage-actions button {
        width:
            100%;
    }
}


/* =========================================================
   RENDIMIENTO - MEDIDORES TIPO TABLERO / VELOCÍMETRO
   ========================================================= */

body #page-history .stats-performance,
#page-home .home-stats-performance {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        14px;

    align-items:
        stretch;
}


/* TARJETA */

body #page-history .stats-gauge-card,
#page-home .stats-gauge-card {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    padding:
        14px 10px 12px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.12)
        );

    overflow:
        hidden;
}


/* CUERPO DEL MEDIDOR */

body #page-history .stats-gauge,
#page-home .stats-gauge {
    position:
        relative;

    width:
        min(150px, 100%);

    aspect-ratio:
        2 / 1;

    overflow:
        hidden;
}


/* ARCO DE PROGRESO */

body #page-history .stats-gauge-dial,
#page-home .stats-gauge-dial {
    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        conic-gradient(
            from 270deg,
            var(--team-primary)
                0
                calc(var(--gauge-value) * .5%),

            rgba(255,255,255,.09)
                calc(var(--gauge-value) * .5%)
                50%,

            transparent
                50%
                100%
        );

    filter:
        drop-shadow(
            0 0 8px
            color-mix(
                in srgb,
                var(--team-primary) 24%,
                transparent
            )
        );
}


body #page-history .stats-gauge-dial::after,
#page-home .stats-gauge-dial::after {
    content:
        "";

    position:
        absolute;

    inset:
        13px;

    border-radius:
        50%;

    background:
        linear-gradient(
            180deg,
            #0c1117,
            #080c10
        );

    box-shadow:
        inset 0 0 24px
        rgba(0,0,0,.7);
}


/* MARCAS DEL VELOCÍMETRO */

body #page-history .stats-gauge-ticks,
#page-home .stats-gauge-ticks {
    position:
        absolute;

    left:
        50%;

    top:
        5px;

    width:
        calc(100% - 10px);

    aspect-ratio:
        1 / 1;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        repeating-conic-gradient(
            from 270deg,
            rgba(255,255,255,.40)
                0deg
                1deg,

            transparent
                1deg
                9deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 74%,
            #000 75% 79%,
            transparent 80%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 74%,
            #000 75% 79%,
            transparent 80%
        );

    opacity:
        .42;
}


/* AGUJA */

body #page-history .stats-gauge-needle,
#page-home .stats-gauge-needle {
    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        44%;

    height:
        3px;

    transform-origin:
        left center;

    transform:
        rotate(
            var(--gauge-angle)
        );

    z-index:
        5;

    transition:
        transform .45s ease;
}


body #page-history .stats-gauge-needle span,
#page-home .stats-gauge-needle span {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--team-primary)
        );

    box-shadow:
        0 0 10px
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            transparent
        );
}


/* CENTRO */

body #page-history .stats-gauge-hub,
#page-home .stats-gauge-hub {
    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    z-index:
        7;

    width:
        13px;

    height:
        13px;

    transform:
        translate(-50%, 50%);

    border:
        3px solid
        #e8e8e8;

    border-radius:
        50%;

    background:
        var(--team-primary);

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 36%,
            transparent
        );
}


/* PORCENTAJE CENTRAL */

body #page-history .stats-gauge-value,
#page-home .stats-gauge-value {
    position:
        absolute;

    left:
        50%;

    bottom:
        16px;

    z-index:
        6;

    transform:
        translateX(-50%);

    text-align:
        center;

    white-space:
        nowrap;
}


body #page-history .stats-gauge-value strong,
#page-home .stats-gauge-value strong {
    color:
        #ffffff;

    font-size:
        clamp(14px, 1.25vw, 19px);

    font-weight:
        950;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.8);
}


/* 0 / 100 */

body #page-history .stats-gauge-min,
body #page-history .stats-gauge-max,
#page-home .stats-gauge-min,
#page-home .stats-gauge-max {
    position:
        absolute;

    bottom:
        1px;

    z-index:
        6;

    color:
        rgba(255,255,255,.36);

    font-size:
        7px;

    font-weight:
        800;
}


body #page-history .stats-gauge-min,
#page-home .stats-gauge-min {
    left:
        4px;
}


body #page-history .stats-gauge-max,
#page-home .stats-gauge-max {
    right:
        4px;
}


/* NOMBRE DEL INDICADOR */

body #page-history .stats-gauge-label,
#page-home .stats-gauge-label {
    display:
        block;

    margin-top:
        9px;

    color:
        rgba(255,255,255,.74);

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .08em;

    text-align:
        center;

    text-transform:
        uppercase;
}


/* QUITAR ESTILO DE BARRAS ANTIGUAS */

body #page-history .stats-performance .stats-bar-row,
body #page-history .stats-performance .stats-bar,
#page-home .home-stats-performance .stats-bar-row,
#page-home .home-stats-performance .stats-bar {
    display:
        none;
}


/* =========================================================
   RESPONSIVE - PANTALLAS MEDIAS
   ========================================================= */

@media (max-width: 1350px) {

    body #page-history .stats-performance,
    #page-home .home-stats-performance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    body #page-history .stats-gauge,
    #page-home .stats-gauge {
        width:
            min(165px, 100%);
    }
}


/* =========================================================
   RESPONSIVE - TABLETS / CELULARES
   ========================================================= */

@media (max-width: 900px) {

    body #page-history .stats-performance,
    #page-home .home-stats-performance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            10px;
    }
}


@media (max-width: 520px) {

    body #page-history .stats-gauge-card,
    #page-home .stats-gauge-card {
        padding:
            12px 7px 10px;

        border-radius:
            12px;
    }

    body #page-history .stats-gauge-value,
    #page-home .stats-gauge-value {
        bottom:
            13px;
    }

    body #page-history .stats-gauge-label,
    #page-home .stats-gauge-label {
        margin-top:
            7px;

        font-size:
            8px;
    }
}


/* =========================================================
   MUY PEQUEÑO
   ========================================================= */

@media (max-width: 360px) {

    body #page-history .stats-performance,
    #page-home .home-stats-performance {
        grid-template-columns:
            1fr;
    }

    body #page-history .stats-gauge,
    #page-home .stats-gauge {
        width:
            min(180px, 100%);
    }
}


/* =========================================================
   RENDIMIENTO - MEDIDOR CORREGIDO V2
   Estilo tablero / velocímetro realista y limpio
   ========================================================= */

body #page-history .stats-performance,
#page-home .home-stats-performance {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}


/* TARJETA */

body #page-history .stats-gauge-card,
#page-home .stats-gauge-card {
    min-height: 175px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 16px 12px 13px !important;

    border:
        1px solid
        rgba(255,255,255,.075) !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 50% 42%,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                transparent
            ),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            #10161d,
            #0a0e13
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 8px 22px rgba(0,0,0,.16) !important;
}


/* CONTENEDOR DEL RELOJ */

body #page-history .stats-gauge,
#page-home .stats-gauge {
    position: relative !important;

    width: min(190px, 100%) !important;
    height: 103px !important;

    aspect-ratio: auto !important;

    overflow: visible !important;

    margin: 0 auto !important;
}


/* ARO COMPLETO */

body #page-history .stats-gauge-dial,
#page-home .stats-gauge-dial {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;

    width: 180px !important;
    height: 180px !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    background:
        conic-gradient(
            from 270deg,

            var(--team-primary)
                0deg
                calc(var(--gauge-value) * 1.8deg),

            rgba(255,255,255,.10)
                calc(var(--gauge-value) * 1.8deg)
                180deg,

            transparent
                180deg
                360deg
        ) !important;

    filter:
        drop-shadow(
            0 0 8px
            color-mix(
                in srgb,
                var(--team-primary) 20%,
                transparent
            )
        ) !important;
}


/* VACÍO INTERIOR = grosor del aro */

body #page-history .stats-gauge-dial::after,
#page-home .stats-gauge-dial::after {
    content: "" !important;

    position: absolute !important;

    inset: 15px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 50% 35%,
            #111821,
            #080c11 72%
        ) !important;

    box-shadow:
        inset 0 0 24px rgba(0,0,0,.7) !important;
}


/* MARCAS */

body #page-history .stats-gauge-ticks,
#page-home .stats-gauge-ticks {
    position: absolute !important;

    left: 50% !important;
    top: 5px !important;

    width: 170px !important;
    height: 170px !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    background:
        repeating-conic-gradient(
            from 270deg,
            rgba(255,255,255,.48) 0deg 1deg,
            transparent 1deg 9deg
        ) !important;

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 75%,
            #000 76% 79%,
            transparent 80%
        ) !important;

    mask:
        radial-gradient(
            circle,
            transparent 0 75%,
            #000 76% 79%,
            transparent 80%
        ) !important;

    opacity: .32 !important;
}


/* TAPAR MEDIA INFERIOR DEL RELOJ */

body #page-history .stats-gauge::after,
#page-home .stats-gauge::after {
    content: "" !important;

    position: absolute !important;

    left: -8px !important;
    right: -8px !important;
    top: 90px !important;
    bottom: -12px !important;

    z-index: 4 !important;

    background:
        linear-gradient(
            180deg,
            rgba(10,14,19,.98),
            rgba(10,14,19,1)
        ) !important;

    pointer-events: none !important;
}


/* AGUJA */

body #page-history .stats-gauge-needle,
#page-home .stats-gauge-needle {
    position: absolute !important;

    left: 50% !important;
    top: 88px !important;
    bottom: auto !important;

    width: 69px !important;
    height: 3px !important;

    z-index: 8 !important;

    transform-origin: 0 50% !important;

    transform:
        rotate(
            var(--gauge-angle)
        ) !important;

    transition:
        transform .45s ease !important;
}


body #page-history .stats-gauge-needle span,
#page-home .stats-gauge-needle span {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 35%,
            var(--team-primary) 100%
        ) !important;

    box-shadow:
        0 0 8px
        color-mix(
            in srgb,
            var(--team-primary) 48%,
            transparent
        ) !important;
}


/* CENTRO */

body #page-history .stats-gauge-hub,
#page-home .stats-gauge-hub {
    position: absolute !important;

    left: 50% !important;
    top: 88px !important;
    bottom: auto !important;

    z-index: 10 !important;

    width: 15px !important;
    height: 15px !important;

    transform:
        translate(-50%, -50%) !important;

    border:
        3px solid
        #f1f1f1 !important;

    border-radius: 50% !important;

    background:
        var(--team-primary) !important;

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            transparent
        ) !important;
}


/* PORCENTAJE */

body #page-history .stats-gauge-value,
#page-home .stats-gauge-value {
    position: absolute !important;

    left: 50% !important;
    top: 48px !important;
    bottom: auto !important;

    z-index: 9 !important;

    transform:
        translateX(-50%) !important;

    text-align: center !important;

    white-space: nowrap !important;
}


body #page-history .stats-gauge-value strong,
#page-home .stats-gauge-value strong {
    color: #ffffff !important;

    font-size: 20px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    font-variant-numeric:
        tabular-nums !important;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.75) !important;
}


/* 0 / 100 */

body #page-history .stats-gauge-min,
body #page-history .stats-gauge-max,
#page-home .stats-gauge-min,
#page-home .stats-gauge-max {
    position: absolute !important;

    top: 78px !important;
    bottom: auto !important;

    z-index: 9 !important;

    color:
        rgba(255,255,255,.34) !important;

    font-size: 7px !important;
    font-weight: 800 !important;
}


body #page-history .stats-gauge-min,
#page-home .stats-gauge-min {
    left: 7px !important;
}


body #page-history .stats-gauge-max,
#page-home .stats-gauge-max {
    right: 7px !important;
}


/* ETIQUETA */

body #page-history .stats-gauge-label,
#page-home .stats-gauge-label {
    position: relative !important;

    z-index: 12 !important;

    display: block !important;

    margin-top: 9px !important;

    color:
        rgba(255,255,255,.80) !important;

    font-size: 9px !important;
    font-weight: 950 !important;

    letter-spacing: .08em !important;

    text-align: center !important;
    text-transform: uppercase !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1350px) {

    body #page-history .stats-performance,
    #page-home .home-stats-performance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


@media (max-width: 650px) {

    body #page-history .stats-performance,
    #page-home .home-stats-performance {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            10px !important;
    }


    body #page-history .stats-gauge-card,
    #page-home .stats-gauge-card {
        min-height:
            155px !important;

        padding:
            12px 8px 10px !important;
    }


    body #page-history .stats-gauge,
    #page-home .stats-gauge {
        transform:
            scale(.90) !important;

        transform-origin:
            center top !important;

        margin-bottom:
            -10px !important;
    }
}


@media (max-width: 390px) {

    body #page-history .stats-performance,
    #page-home .home-stats-performance {
        grid-template-columns:
            1fr !important;
    }


    body #page-history .stats-gauge,
    #page-home .stats-gauge {
        transform:
            scale(1) !important;

        margin-bottom:
            0 !important;
    }
}


/* =========================================================
   ADMIN USUARIOS - CONTROL DE SETUPS + ESTADÍSTICAS
   ========================================================= */

.user-access-badges {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        9px;
}

.user-access-badges .access-badge {
    margin-top:
        0;
}

.access-badge.statistics.allowed {
    color:
        #74d8ff;

    background:
        rgba(65, 183, 255, .10);

    border-color:
        rgba(65, 183, 255, .35);
}

.access-badge.statistics.blocked {
    color:
        #aeb7c2;

    background:
        rgba(140, 150, 165, .07);

    border-color:
        rgba(140, 150, 165, .25);
}

.user-admin-actions .permission-button.statistics.enable:hover {
    border-color:
        #58c7ff;
}

.user-admin-actions .permission-button.statistics.disable:hover {
    border-color:
        #ffb85c;
}

.user-admin-actions {
    min-width:
        210px;
}

@media (max-width: 1100px) {

    .user-admin-actions {
        min-width:
            0;

        width:
            100%;
    }
}

@media (max-width: 650px) {

    .user-access-badges {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;
    }

    .user-access-badges .access-badge {
        width:
            fit-content;
    }
}

/* =========================================
   SEPARACIÓN:
   WIDGETS ESTADÍSTICAS → TARJETAS DE INICIO
========================================= */

#page-home #homeStatisticsWidgets:not(.hidden) {
    margin-bottom: 28px !important;
}

/* TABLET */
@media (max-width: 1024px) {
    #page-home #homeStatisticsWidgets:not(.hidden) {
        margin-bottom: 24px !important;
    }
}

/* MÓVIL */
@media (max-width: 600px) {
    #page-home #homeStatisticsWidgets:not(.hidden) {
        margin-bottom: 20px !important;
    }
}


/* =========================================================
   CALENDARIO F1 - TOP 3 DENTRO DE CADA GP COMPLETADO
   ========================================================= */

.calendar-section-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.calendar-podium-toggle {
    min-height:
        40px;
}


/*
   Reemplaza visualmente R01/R02/R03...
   solamente en las carreras ya completadas.
*/

.calendar-card-podium-slot {
    position:
        absolute;

    right:
        14px;

    bottom:
        13px;

    z-index:
        5;

    width:
        92px;

    min-height:
        58px;

    padding:
        0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    backdrop-filter:
        none;
}


.calendar-round-watermark {
    z-index:
        2;

    opacity:
        .20;

    pointer-events:
        none;
}


.calendar-card-podium-slot > small {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--team-primary);

    font-size:
        7px;

    font-weight:
        950;

    letter-spacing:
        .12em;
}


.calendar-card-podium-slot.loading > span,
.calendar-card-podium-slot.unavailable > span {
    color:
        rgba(255,255,255,.35);

    font-size:
        7px;
}


.calendar-mini-podium {
    display:
        grid;

    gap:
        2px;
}


.calendar-mini-podium-row {
    display:
        grid;

    grid-template-columns:
        17px
        minmax(0,1fr);

    align-items:
        center;

    gap:
        3px;

    min-width:
        0;

    line-height:
        1;
}


.calendar-mini-podium-row > span {
    font-size:
        10px;
}


.calendar-mini-podium-row > strong {
    overflow:
        hidden;

    color:
        #ffffff;

    font-size:
        8px;

    font-weight:
        950;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/*
   Dejamos suficiente espacio inferior para que
   la imagen del circuito y el mini Top 3 no se pisen.
*/

.calendar-race-card.completed .calendar-track-image {
    max-width:
        calc(100% - 118px);
}


@media (max-width: 600px) {

    .calendar-section-actions {
        width:
            100%;

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .calendar-podium-toggle {
        width:
            100%;

        justify-content:
            space-between;
    }


    .calendar-card-podium-slot {
        width:
            94px;
    }
}


/* =========================================================
   INICIO - WIDGET ÚLTIMO TOP 3
   ========================================================= */

.home-f1-podium-widget {
    width: 100%;
    margin-top: 14px;
    margin-bottom: 28px;
}


.home-f1-podium-card {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at 85% 15%,
            color-mix(
                in srgb,
                var(--team-primary) 9%,
                transparent
            ),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #10161d,
            #090d12
        );
}


.home-f1-podium-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--team-primary);
}


.home-f1-podium-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}


.home-f1-podium-head > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}


.home-f1-podium-head h3 {
    margin: 0;
    font-size: 15px;
}


.home-f1-podium-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}


.home-f1-podium-head button {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: #fff;
    cursor: pointer;
}


.home-f1-podium-head button:hover {
    border-color: var(--team-primary);
    color: var(--team-primary);
}


.home-f1-podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    margin-top: 14px;
}


.home-f1-podium-driver {
    position: relative;
    display: grid;
    grid-template-columns: auto 50px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 66px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--driver-team-color) 8%,
                transparent
            ),
            rgba(255,255,255,.015)
        );
}


.home-f1-podium-driver::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: var(--driver-team-color);
}


.home-f1-podium-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 14px;
}


.home-f1-podium-rank strong {
    font-size: 8px;
}


.home-f1-podium-driver img {
    width: 50px;
    height: 58px;
    object-fit: contain;
    object-position: bottom center;
}


.home-f1-podium-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 58px;
    font-size: 24px;
}


.home-f1-podium-driver > div:last-child {
    min-width: 0;
}


.home-f1-podium-driver > div:last-child strong,
.home-f1-podium-driver > div:last-child small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.home-f1-podium-driver > div:last-child strong {
    font-size: 11px;
}


.home-f1-podium-driver > div:last-child small {
    margin-top: 4px;
    color: var(--driver-team-color);
    font-size: 8px;
    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .f1-podium-grid {
        grid-template-columns: 1fr;
    }


    .f1-podium-driver {
        display: grid;
        grid-template-columns: 65px 85px minmax(0,1fr);
        align-items: center;
    }


    .f1-podium-driver-photo {
        height: 80px;
        margin-top: 0;
    }


    .f1-podium-driver-photo img {
        height: 80px;
    }


    .f1-podium-driver-info {
        border-top: 0;
        padding-top: 0;
    }


    .home-f1-podium-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .f1-podium-card {
        padding: 16px;
    }


    .f1-podium-head {
        align-items: stretch;
        flex-direction: column;
    }


    .f1-podium-widget-toggle {
        justify-content: space-between;
        width: 100%;
    }


    .f1-podium-driver {
        grid-template-columns: 55px 70px minmax(0,1fr);
    }


    .home-f1-podium-widget {
        margin-bottom: 20px;
    }
}


/* =========================================================
   AJUSTE TOP 3 + RONDA COMO MARCA DE AGUA
   ========================================================= */

.calendar-race-card.completed .calendar-card-podium-slot {
    text-align: right;
}

.calendar-race-card.completed .calendar-card-podium-slot > small {
    text-align: right;
    text-shadow: 0 1px 8px rgba(0,0,0,.95);
}

.calendar-race-card.completed .calendar-mini-podium {
    justify-items: end;
}

.calendar-race-card.completed .calendar-mini-podium-row {
    width: 82px;
    grid-template-columns: 17px minmax(0,1fr);
    text-align: left;
}

.calendar-race-card.completed .calendar-mini-podium-row > strong {
    text-shadow: 0 1px 8px rgba(0,0,0,.95);
}

/* R01, R02, R03... permanece visible detrás del Top 3 */
.calendar-race-card.completed .calendar-round-watermark {
    display: block !important;
    font-size: clamp(34px, 2.8vw, 52px);
    font-weight: 950;
    letter-spacing: -.04em;
    opacity: .16;
}

/* La pista mantiene su espacio original; el podio se integra
   visualmente en la zona de la ronda sin crear otra tarjeta. */
.calendar-race-card.completed .calendar-track-image {
    max-width: none;
}

@media (max-width: 600px) {
    .calendar-race-card.completed .calendar-round-watermark {
        font-size: 38px;
        opacity: .14;
    }

    .calendar-race-card.completed .calendar-card-podium-slot {
        right: 12px;
        bottom: 11px;
        width: 88px;
    }
}


/* =========================================================
   CALENDARIO F1 - BANDERA ISO DESDE f1-calendar
   ========================================================= */

.calendar-country-flag-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 23px;
    font-size: 27px;
    line-height: 1;
    filter: saturate(1.05);
}

.next-race-country .calendar-country-flag-emoji {
    margin-right: 8px;
}

/* =========================================================
   FIX DEFINITIVO - TOP 3 CALENDARIO F1
   ========================================================= */

.calendar-race-card.completed {
    opacity: 1 !important;
}


/* Atenuar solo el contenido normal de una carrera completada */

.calendar-race-card.completed > h3,
.calendar-race-card.completed > .calendar-circuit,
.calendar-race-card.completed > .calendar-location,
.calendar-race-card.completed > .calendar-date,
.calendar-race-card.completed > .calendar-card-top {
    opacity: .68;
}


/* =========================================
   RONDA COMO MARCA DE AGUA
========================================= */

.calendar-race-card.completed .calendar-round-watermark {
    display: block !important;

    position: absolute;

    right: 16px;
    bottom: 8px;

    z-index: 1;

    font-size: 52px;
    font-weight: 950;

    color: var(--team-primary);

    opacity: .12;

    pointer-events: none;
}


/* =========================================
   CONTENEDOR TOP 3
========================================= */

.calendar-race-card.completed .calendar-card-podium-slot {
    display: block !important;

    position: absolute;

    right: 16px;
    bottom: 16px;

    z-index: 20;

    width: 120px;
    min-height: 78px;

    padding: 8px 10px;

    border-radius: 10px;

    background:
        rgba(5, 5, 5, .82);

    border:
        1px solid
        rgba(255, 255, 255, .08);

    backdrop-filter:
        blur(7px);

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .45);

    text-align: left;
}


/* TOP 3 */

.calendar-race-card.completed
.calendar-card-podium-slot > small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--team-primary);

    font-size: 8px;

    font-weight: 950;

    letter-spacing: .14em;

    text-align: left;
}


/* =========================================
   LISTA
========================================= */

.calendar-race-card.completed
.calendar-mini-podium {

    display: grid;

    gap: 5px;

    justify-items: stretch;
}


/* FILA PILOTO */

.calendar-race-card.completed
.calendar-mini-podium-row {

    display: grid;

    grid-template-columns:
        20px
        minmax(0, 1fr);

    align-items: center;

    gap: 5px;

    width: 100%;

    min-width: 0;

    line-height: 1.1;
}


/* MEDALLA */

.calendar-race-card.completed
.calendar-mini-podium-row > span {

    font-size: 12px;
}


/* NOR / ANT / RUS */

.calendar-race-card.completed
.calendar-mini-podium-row > strong {

    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 10px;

    font-weight: 950;

    letter-spacing: .04em;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-shadow:
        0 1px 6px
        rgba(0, 0, 0, 1);
}


/* =========================================
   IMAGEN DE PISTA
========================================= */

.calendar-race-card.completed
.calendar-track-image {

    position: relative;

    z-index: 2;

    max-width:
        calc(100% - 130px);
}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 600px) {

    .calendar-race-card.completed
    .calendar-card-podium-slot {

        right: 12px;
        bottom: 12px;

        width: 112px;

        padding: 7px 9px;
    }


    .calendar-race-card.completed
    .calendar-mini-podium-row > strong {

        font-size: 9px;
    }


    .calendar-race-card.completed
    .calendar-round-watermark {

        right: 12px;
        bottom: 6px;

        font-size: 44px;
    }
}
/* =========================================================
   CALENDARIO F1 V3 - REDISEÑO COMPACTO / PREMIUM
   ========================================================= */

#page-calendar .f1-calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

#page-calendar .calendar-race-card-v2 {
    position: relative;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,0) 42%
        ),
        #0d0d0f;
    box-shadow:
        0 18px 45px rgba(0,0,0,.22);
    opacity: 1 !important;
}

#page-calendar .calendar-race-card-v2:hover {
    transform: translateY(-4px);
    border-color: color-mix(
        in srgb,
        var(--team-primary) 60%,
        rgba(255,255,255,.12)
    );
    background:
        linear-gradient(
            160deg,
            color-mix(
                in srgb,
                var(--team-primary) 8%,
                transparent
            ),
            rgba(255,255,255,0) 45%
        ),
        #0d0d0f;
}

#page-calendar .calendar-card-accent {
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--team-primary),
            transparent 82%
        );
}

#page-calendar .calendar-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 0;
    opacity: 1 !important;
}

#page-calendar .calendar-country-box {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

#page-calendar .calendar-country-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 23px;
    font-size: 25px;
    line-height: 1;
    flex: 0 0 auto;
}

#page-calendar .calendar-country-name {
    overflow: hidden;
    color: #9b9ba2;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-calendar .calendar-status {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
}

#page-calendar .calendar-status.completed {
    color: #b6b6bd;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
}

#page-calendar .calendar-status.upcoming {
    color: #fff;
    background:
        color-mix(
            in srgb,
            var(--team-primary) 16%,
            transparent
        );
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            transparent
        );
}

#page-calendar .calendar-status.live {
    color: #fff;
    background: var(--team-primary);
    border: 1px solid var(--team-primary);
    box-shadow:
        0 0 24px
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            transparent
        );
}

#page-calendar .calendar-status.cancelled {
    color: #ff7777;
    background: rgba(255,87,87,.08);
    border: 1px solid rgba(255,87,87,.28);
}

#page-calendar .calendar-card-heading {
    padding: 17px 20px 0;
}

#page-calendar .calendar-round-label {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--team-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .16em;
}

#page-calendar .calendar-race-card-v2 h3 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: -.035em;
    opacity: 1 !important;
}

#page-calendar .calendar-race-card-v2 .calendar-circuit {
    margin-top: 8px;
    color: #aaaab2;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    opacity: 1 !important;
}

#page-calendar .calendar-race-card-v2 > .calendar-location {
    display: none;
}

#page-calendar .calendar-date-v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 17px 20px 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255,255,255,.07);
    opacity: 1 !important;
}

#page-calendar .calendar-date-v2 > span {
    color: #686870;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .15em;
}

#page-calendar .calendar-date-v2 > strong {
    color: #d9d9dd;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
}

#page-calendar .calendar-track-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 142px;
    margin: 10px 12px 0;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--team-primary) 6%,
                transparent
            ),
            transparent 62%
        );
}

#page-calendar .calendar-track-stage .calendar-track-image {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 235px !important;
    max-height: 112px;
    margin: 0;
    object-fit: contain;
    filter:
        drop-shadow(
            0 12px 18px rgba(0,0,0,.35)
        );
    opacity: .95;
}

#page-calendar .calendar-track-placeholder {
    position: relative;
    z-index: 2;
    font-size: 36px;
    opacity: .24;
}

#page-calendar .calendar-track-stage .calendar-round-watermark {
    position: absolute !important;
    right: 12px !important;
    bottom: -7px !important;
    z-index: 1 !important;
    display: block !important;
    color: var(--team-primary);
    font-size: clamp(48px, 5vw, 74px) !important;
    font-weight: 950 !important;
    letter-spacing: -.07em !important;
    line-height: 1 !important;
    opacity: .08 !important;
    pointer-events: none;
}

#page-calendar .calendar-podium-section {
    margin: 4px 14px 0;
    padding: 12px 12px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );
}

#page-calendar .calendar-podium-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

#page-calendar .calendar-podium-section-head > span {
    color: #d6d6db;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .14em;
}

#page-calendar .calendar-podium-section-head > small {
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .12em;
}

#page-calendar .calendar-card-podium-slot {
    position: static !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

#page-calendar .calendar-podium-v2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

#page-calendar .calendar-podium-driver-v2 {
    position: relative;
    min-width: 0;
    padding: 9px 8px 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(0,0,0,.20);
}

#page-calendar .calendar-podium-driver-v2::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background:
        var(
            --driver-team-color,
            var(--team-primary)
        );
}

#page-calendar .calendar-podium-medal {
    font-size: 14px;
    line-height: 1;
}

#page-calendar .calendar-podium-position {
    margin-top: 4px;
    color: #686870;
    font-size: 7px;
    font-weight: 950;
}

#page-calendar .calendar-podium-driver-info {
    margin-top: 4px;
    min-width: 0;
}

#page-calendar .calendar-podium-driver-info > strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-calendar .calendar-podium-driver-info > span {
    display: none;
}

#page-calendar .calendar-podium-driver-info > small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #777780;
    font-size: 7px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-calendar .calendar-podium-empty {
    color: #74747b;
    font-size: 10px;
}

#page-calendar .calendar-sessions-v2 {
    margin: 12px 14px 14px;
}

#page-calendar .calendar-sessions-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 39px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: #aaaab2;
    cursor: pointer;
    transition:
        .18s ease;
}

#page-calendar .calendar-sessions-toggle:hover {
    color: #fff;
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            rgba(255,255,255,.08)
        );
    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            rgba(255,255,255,.02)
        );
}

#page-calendar .calendar-sessions-toggle > span {
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .13em;
}

#page-calendar .calendar-sessions-chevron {
    color: var(--team-primary);
    font-size: 17px;
    font-weight: 500;
}

#page-calendar .calendar-session-list-v2 {
    margin-top: 8px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    background: #09090b;
}

#page-calendar .calendar-session-row-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 34px;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

#page-calendar .calendar-session-row-v2:last-child {
    border-bottom: 0;
}

#page-calendar .calendar-session-row-v2 > div {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

#page-calendar .calendar-session-row-v2 > div > span {
    overflow: hidden;
    color: #aaaab2;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-calendar .calendar-session-row-v2 > div > small {
    flex: 0 0 auto;
    padding: 2px 5px;
    border-radius: 5px;
    color: #686870;
    background: rgba(255,255,255,.04);
    font-size: 7px;
    font-weight: 950;
}

#page-calendar .calendar-session-row-v2 > strong {
    flex: 0 0 auto;
    color: #d6d6da;
    font-size: 8px;
    font-weight: 750;
    text-align: right;
}

#page-calendar .calendar-session-row-v2.is-race {
    margin-top: 3px;
    border-bottom: 0;
    border-radius: 8px;
    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            transparent
        );
}

#page-calendar .calendar-session-row-v2.is-race > div > span,
#page-calendar .calendar-session-row-v2.is-race > strong {
    color: #fff;
}

#page-calendar .calendar-race-card.completed > h3,
#page-calendar .calendar-race-card.completed > .calendar-circuit,
#page-calendar .calendar-race-card.completed > .calendar-location,
#page-calendar .calendar-race-card.completed > .calendar-date,
#page-calendar .calendar-race-card.completed > .calendar-card-top {
    opacity: 1 !important;
}


/* TABLET */
@media (max-width: 1180px) {

    #page-calendar .f1-calendar-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* MÓVIL */
@media (max-width: 700px) {

    #page-calendar .f1-calendar-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #page-calendar .calendar-race-card-v2 {
        border-radius: 17px;
    }

    #page-calendar .calendar-card-top {
        padding:
            16px 16px 0;
    }

    #page-calendar .calendar-card-heading {
        padding:
            15px 16px 0;
    }

    #page-calendar .calendar-race-card-v2 h3 {
        font-size: 27px;
    }

    #page-calendar .calendar-date-v2 {
        margin:
            15px 16px 0;
    }

    #page-calendar .calendar-track-stage {
        height: 135px;
        margin:
            8px 10px 0;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        width: 72%;
        max-height: 105px;
    }

    #page-calendar .calendar-podium-section {
        margin:
            4px 11px 0;
    }

    #page-calendar .calendar-podium-v2 {
        gap: 5px;
    }

    #page-calendar .calendar-podium-driver-v2 {
        padding:
            8px 6px 7px;
    }

    #page-calendar .calendar-podium-driver-info > strong {
        font-size: 11px;
    }

    #page-calendar .calendar-sessions-v2 {
        margin:
            10px 11px 11px;
    }
}


/* TELÉFONOS MUY PEQUEÑOS */
@media (max-width: 400px) {

    #page-calendar .calendar-country-name {
        display: none;
    }

    #page-calendar .calendar-podium-driver-info > small {
        display: none;
    }

    #page-calendar .calendar-date-v2 {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    #page-calendar .calendar-date-v2 > strong {
        text-align: left;
    }
}
/* =========================================================
   CALENDARIO F1 V3.1 - AJUSTE DE LEGIBILIDAD
   Aumenta textos secundarios y Top 3 sin agrandar tarjetas
   ========================================================= */

#page-calendar .calendar-country-name {
    font-size: 12px;
    letter-spacing: .10em;
}

#page-calendar .calendar-status {
    padding: 7px 10px;
    font-size: 10px;
}

#page-calendar .calendar-round-label {
    margin-bottom: 6px;
    font-size: 11px;
}

#page-calendar .calendar-race-card-v2 .calendar-circuit {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.4;
}

#page-calendar .calendar-date-v2 > span {
    font-size: 10px;
    letter-spacing: .13em;
}

#page-calendar .calendar-date-v2 > strong {
    font-size: 12px;
    line-height: 1.35;
}

#page-calendar .calendar-podium-section-head > span {
    font-size: 10px;
    letter-spacing: .12em;
}

#page-calendar .calendar-podium-section-head > small {
    font-size: 10px;
}

#page-calendar .calendar-podium-driver-v2 {
    padding: 11px 10px 10px;
}

#page-calendar .calendar-podium-medal {
    font-size: 17px;
}

#page-calendar .calendar-podium-position {
    margin-top: 5px;
    font-size: 9px;
}

#page-calendar .calendar-podium-driver-info > strong {
    font-size: 15px;
    line-height: 1.1;
}

#page-calendar .calendar-podium-driver-info > small {
    margin-top: 4px;
    font-size: 9px;
    line-height: 1.25;
}

#page-calendar .calendar-podium-empty {
    font-size: 12px;
}

#page-calendar .calendar-sessions-toggle {
    min-height: 44px;
    padding: 0 14px;
}

#page-calendar .calendar-sessions-toggle > span {
    font-size: 10px;
    letter-spacing: .11em;
}

#page-calendar .calendar-sessions-chevron {
    font-size: 20px;
}

#page-calendar .calendar-session-row-v2 {
    min-height: 40px;
    padding: 9px 10px;
}

#page-calendar .calendar-session-row-v2 > div > span {
    font-size: 11px;
}

#page-calendar .calendar-session-row-v2 > div > small {
    padding: 3px 6px;
    font-size: 8px;
}

#page-calendar .calendar-session-row-v2 > strong {
    font-size: 10px;
}


/* TABLET */
@media (max-width: 1180px) {

    #page-calendar .calendar-country-name {
        font-size: 11px;
    }

    #page-calendar .calendar-race-card-v2 .calendar-circuit {
        font-size: 12px;
    }

    #page-calendar .calendar-date-v2 > strong {
        font-size: 11px;
    }

    #page-calendar .calendar-podium-driver-info > strong {
        font-size: 14px;
    }

    #page-calendar .calendar-podium-driver-info > small {
        font-size: 8px;
    }
}


/* MÓVIL */
@media (max-width: 700px) {

    #page-calendar .calendar-country-name {
        font-size: 11px;
    }

    #page-calendar .calendar-status {
        font-size: 9px;
    }

    #page-calendar .calendar-round-label {
        font-size: 10px;
    }

    #page-calendar .calendar-race-card-v2 .calendar-circuit {
        font-size: 12px;
    }

    #page-calendar .calendar-date-v2 > span {
        font-size: 9px;
    }

    #page-calendar .calendar-date-v2 > strong {
        font-size: 11px;
    }

    #page-calendar .calendar-podium-section-head > span,
    #page-calendar .calendar-podium-section-head > small {
        font-size: 9px;
    }

    #page-calendar .calendar-podium-medal {
        font-size: 16px;
    }

    #page-calendar .calendar-podium-position {
        font-size: 8px;
    }

    #page-calendar .calendar-podium-driver-info > strong {
        font-size: 13px;
    }

    #page-calendar .calendar-podium-driver-info > small {
        font-size: 8px;
    }

    #page-calendar .calendar-sessions-toggle > span {
        font-size: 9px;
    }

    #page-calendar .calendar-session-row-v2 > div > span {
        font-size: 10px;
    }

    #page-calendar .calendar-session-row-v2 > strong {
        font-size: 9px;
    }
}


/* TELÉFONOS MUY PEQUEÑOS */
@media (max-width: 400px) {

    #page-calendar .calendar-country-name {
        display: inline;
        font-size: 10px;
    }

    #page-calendar .calendar-podium-driver-info > small {
        display: block;
        font-size: 7px;
    }
}
/* =========================================================
   CALENDARIO F1 V4 - MINIMALISTA / F1 PREMIUM
   Inspirado en tarjetas oscuras, tipografía grande y limpia.
   ========================================================= */

#page-calendar .f1-calendar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: start;
}

/* TARJETA */
#page-calendar .calendar-race-card-v2 {
    min-height: 0 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,0) 45%
        ),
        #0b0c0e !important;
    box-shadow:
        0 16px 38px rgba(0,0,0,.28) !important;
}

#page-calendar .calendar-race-card-v2:hover {
    transform: translateY(-3px) !important;
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            rgba(255,255,255,.16)
        ) !important;
}

/* LÍNEA SUPERIOR */
#page-calendar .calendar-card-accent {
    height: 3px !important;
    background:
        linear-gradient(
            90deg,
            var(--team-primary) 0%,
            var(--team-primary) 28%,
            transparent 72%
        ) !important;
}

/* CABECERA PAÍS + ESTADO */
#page-calendar .calendar-card-top {
    padding: 18px 20px 0 !important;
    align-items: center !important;
}

#page-calendar .calendar-country-box {
    gap: 10px !important;
}

#page-calendar .calendar-country-emoji {
    width: auto !important;
    min-width: 30px !important;
    height: auto !important;
    font-size: 27px !important;
}

#page-calendar .calendar-country-name {
    display: inline !important;
    color: #b8b8bf !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
}

/* ESTADOS */
#page-calendar .calendar-status {
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .10em !important;
}

#page-calendar .calendar-status.completed {
    color: #5ee790 !important;
    background: rgba(55, 200, 105, .07) !important;
    border: 1px solid rgba(55, 200, 105, .24) !important;
}

#page-calendar .calendar-status.upcoming {
    color: #fff !important;
    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        ) !important;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 36%,
            transparent
        ) !important;
}

/* CABECERA DE CARRERA */
#page-calendar .calendar-card-heading {
    padding: 18px 20px 0 !important;
}

#page-calendar .calendar-round-label {
    margin-bottom: 7px !important;
    color: var(--team-primary) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
}

#page-calendar .calendar-race-card-v2 h3 {
    font-size: clamp(29px, 2vw, 36px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
}

#page-calendar .calendar-race-card-v2 .calendar-circuit {
    margin-top: 9px !important;
    color: #b9b9c0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* FECHA - MÁS LIMPIA */
#page-calendar .calendar-date-v2 {
    margin: 17px 20px 0 !important;
    padding-top: 14px !important;
    align-items: center !important;
    border-top: 0 !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

#page-calendar .calendar-date-v2::before {
    content: "◷";
    color: #d0d0d5;
    font-size: 18px;
    line-height: 1;
}

#page-calendar .calendar-date-v2 > span {
    display: none !important;
}

#page-calendar .calendar-date-v2 > strong {
    color: #e3e3e7 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    text-align: left !important;
}

/* TRAZADO */
#page-calendar .calendar-track-stage {
    height: 155px !important;
    margin: 8px 16px 0 !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background:
        radial-gradient(
            circle at 52% 50%,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                transparent
            ),
            transparent 63%
        ) !important;
}

#page-calendar .calendar-track-stage .calendar-track-image {
    width: 70% !important;
    max-width: 260px !important;
    max-height: 116px !important;
    opacity: .96 !important;
}

#page-calendar .calendar-track-stage .calendar-round-watermark {
    right: 14px !important;
    bottom: 5px !important;
    font-size: clamp(54px, 4vw, 74px) !important;
    opacity: .075 !important;
}

/* TOP 3 - MINIMALISTA */
#page-calendar .calendar-podium-section {
    margin: 2px 16px 0 !important;
    padding: 13px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#page-calendar .calendar-podium-section-head {
    justify-content: flex-start !important;
    margin-bottom: 10px !important;
}

#page-calendar .calendar-podium-section-head > span {
    display: none !important;
}

#page-calendar .calendar-podium-section-head > small {
    color: var(--team-primary) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
}

#page-calendar .calendar-podium-v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

#page-calendar .calendar-podium-driver-v2 {
    min-height: 68px !important;
    padding: 10px 10px 9px 13px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 11px !important;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ) !important;
}

#page-calendar .calendar-podium-driver-v2::before {
    width: 2px !important;
}

#page-calendar .calendar-podium-medal {
    font-size: 18px !important;
}

#page-calendar .calendar-podium-position {
    margin-top: 3px !important;
    font-size: 9px !important;
}

#page-calendar .calendar-podium-driver-info {
    margin-top: 3px !important;
}

#page-calendar .calendar-podium-driver-info > strong {
    font-size: 16px !important;
    line-height: 1 !important;
}

#page-calendar .calendar-podium-driver-info > span {
    display: none !important;
}

#page-calendar .calendar-podium-driver-info > small {
    display: block !important;
    margin-top: 4px !important;
    color: #9a9aa2 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

/* BOTÓN HORARIOS */
#page-calendar .calendar-sessions-v2 {
    margin: 14px 16px 16px !important;
}

#page-calendar .calendar-sessions-toggle {
    min-height: 50px !important;
    padding: 0 15px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        ) !important;
}

#page-calendar .calendar-sessions-toggle > span {
    color: #d3d3d8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .11em !important;
}

#page-calendar .calendar-sessions-chevron {
    color: var(--team-primary) !important;
    font-size: 23px !important;
}

/* HORARIOS DESPLEGADOS */
#page-calendar .calendar-session-list-v2 {
    margin-top: 9px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: #08090a !important;
}

#page-calendar .calendar-session-row-v2 {
    min-height: 46px !important;
    padding: 10px 11px !important;
}

#page-calendar .calendar-session-row-v2 > div > span {
    color: #d3d3d7 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

#page-calendar .calendar-session-row-v2 > div > small {
    font-size: 9px !important;
}

#page-calendar .calendar-session-row-v2 > strong {
    color: #e1e1e5 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* CARRERA DESTACADA */
#page-calendar .calendar-session-row-v2.is-race {
    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            transparent
        ) !important;
}

#page-calendar .calendar-session-row-v2.is-race > div > span,
#page-calendar .calendar-session-row-v2.is-race > strong {
    font-weight: 900 !important;
}

/* TABLET */
@media (max-width: 1200px) {
    #page-calendar .f1-calendar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* MÓVIL */
@media (max-width: 720px) {

    #page-calendar .f1-calendar-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #page-calendar .calendar-race-card-v2 h3 {
        font-size: 31px !important;
    }

    #page-calendar .calendar-race-card-v2 .calendar-circuit {
        font-size: 14px !important;
    }

    #page-calendar .calendar-date-v2 > strong {
        font-size: 13px !important;
    }

    #page-calendar .calendar-track-stage {
        height: 145px !important;
    }

    #page-calendar .calendar-podium-driver-info > strong {
        font-size: 15px !important;
    }

    #page-calendar .calendar-podium-driver-info > small {
        font-size: 9px !important;
    }

    #page-calendar .calendar-sessions-toggle > span {
        font-size: 11px !important;
    }
}

/* TELÉFONOS PEQUEÑOS */
@media (max-width: 430px) {

    #page-calendar .calendar-card-top {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #page-calendar .calendar-card-heading {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #page-calendar .calendar-country-name {
        font-size: 10px !important;
    }

    #page-calendar .calendar-status {
        font-size: 9px !important;
    }

    #page-calendar .calendar-podium-v2 {
        gap: 6px !important;
    }

    #page-calendar .calendar-podium-driver-v2 {
        padding-left: 10px !important;
        padding-right: 7px !important;
    }

    #page-calendar .calendar-podium-medal {
        font-size: 16px !important;
    }

    #page-calendar .calendar-podium-driver-info > strong {
        font-size: 14px !important;
    }

    #page-calendar .calendar-podium-driver-info > small {
        display: none !important;
    }
}
/* =========================================================
   CALENDARIO F1 V4.1 - MAPA ARRIBA + BLOQUE INFERIOR ARRIBA
   ========================================================= */

/* Acorta la zona del mapa y la pega más a la fecha */
#page-calendar .calendar-track-stage {
    height: 112px !important;
    margin: 0 16px 0 !important;
    align-items: flex-start !important;
    padding-top: 2px !important;
}

/* Sube físicamente el trazado dentro de la tarjeta */
#page-calendar .calendar-track-stage .calendar-track-image {
    width: 66% !important;
    max-width: 245px !important;
    max-height: 96px !important;
    transform: translateY(-10px) !important;
}

/* Sube también la marca de agua R01/R02... */
#page-calendar .calendar-track-stage .calendar-round-watermark {
    right: 14px !important;
    bottom: -2px !important;
    font-size: clamp(50px, 4vw, 68px) !important;
}

/* Sube el bloque TOP 3 para quitar el hueco grande */
#page-calendar .calendar-podium-section {
    margin: -4px 16px 0 !important;
    padding-top: 10px !important;
}

/* Hace el TOP 3 un poco más compacto verticalmente */
#page-calendar .calendar-podium-driver-v2 {
    min-height: 62px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Acerca VER HORARIOS al TOP 3 */
#page-calendar .calendar-sessions-v2 {
    margin: 10px 16px 14px !important;
}

/* En carreras futuras, el botón también sube */
#page-calendar .calendar-race-card-v2:not(.completed) .calendar-sessions-v2 {
    margin-top: -2px !important;
}

/* MÓVIL */
@media (max-width: 720px) {

    #page-calendar .calendar-track-stage {
        height: 106px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        width: 64% !important;
        max-height: 90px !important;
        transform: translateY(-8px) !important;
    }

    #page-calendar .calendar-podium-section {
        margin:
            -2px 12px 0 !important;
    }

    #page-calendar .calendar-sessions-v2 {
        margin:
            9px 12px 12px !important;
    }
}
/* =========================================================
   CALENDARIO F1 V4.2 - COMPACTACIÓN REAL DEL BLOQUE CENTRAL
   ========================================================= */

/* Reducir de verdad el espacio entre la fecha y el TOP 3 */
#page-calendar .calendar-track-stage {
    height: 72px !important;
    min-height: 72px !important;
    margin: 2px 16px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Colocar el mapa más arriba sin reservar altura extra */
#page-calendar .calendar-track-stage .calendar-track-image {
    position: absolute !important;
    top: -4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    max-width: 200px !important;
    height: 72px !important;
    max-height: 72px !important;

    object-fit: contain !important;
    margin: 0 !important;
}

/* R01/R02... más arriba y dentro de la misma zona */
#page-calendar .calendar-track-stage .calendar-round-watermark {
    position: absolute !important;
    right: 8px !important;
    bottom: -3px !important;

    font-size: 54px !important;
    line-height: 1 !important;
    opacity: .07 !important;
}

/* El TOP 3 empieza inmediatamente debajo del mapa */
#page-calendar .calendar-podium-section {
    margin: 0 16px !important;
    padding-top: 9px !important;
}

/* Reducir un poco la altura de los tres resultados */
#page-calendar .calendar-podium-driver-v2 {
    min-height: 58px !important;
    padding: 8px 10px 7px 13px !important;
}

/* Ver horarios más cerca del TOP 3 */
#page-calendar .calendar-sessions-v2 {
    margin: 9px 16px 14px !important;
}

/* Si la carrera todavía no tiene Top 3, el botón también queda compacto */
#page-calendar .calendar-race-card-v2:not(.completed) .calendar-sessions-v2 {
    margin-top: 4px !important;
}


/* MÓVIL */
@media (max-width: 720px) {

    #page-calendar .calendar-track-stage {
        height: 68px !important;
        min-height: 68px !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        top: -2px !important;
        max-width: 180px !important;
        height: 66px !important;
        max-height: 66px !important;
    }

    #page-calendar .calendar-track-stage .calendar-round-watermark {
        right: 6px !important;
        bottom: -2px !important;
        font-size: 50px !important;
    }

    #page-calendar .calendar-podium-section {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    #page-calendar .calendar-sessions-v2 {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}
/* =========================================================
   CALENDARIO F1 V4.3
   TRAZADO AL LADO DEL NOMBRE DE LA PISTA
   ========================================================= */

/*
   La tarjeta usa la cabecera como referencia.
   El trazado deja de ocupar una fila debajo de la fecha.
*/
#page-calendar .calendar-race-card-v2 {
    position: relative !important;
}

/* Dejamos espacio a la derecha del nombre para el mapa */
#page-calendar .calendar-card-heading {
    position: relative !important;
    min-height: 92px !important;
    padding-right: 48% !important;
}

/* La zona original del mapa deja de reservar espacio */
#page-calendar .calendar-track-stage {
    position: absolute !important;
    top: 72px !important;
    right: 18px !important;
    left: auto !important;

    width: 42% !important;
    height: 105px !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}

/* Mapa grande al lado de Melbourne / Shanghai / Suzuka */
#page-calendar .calendar-track-stage .calendar-track-image {
    position: static !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 220px !important;
    height: 88px !important;
    max-height: 88px !important;

    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
}

/* R01/R02/R03 queda como marca de agua detrás/derecha del mapa */
#page-calendar .calendar-track-stage .calendar-round-watermark {
    position: absolute !important;
    right: 0 !important;
    bottom: -4px !important;

    font-size: 52px !important;
    line-height: 1 !important;
    opacity: .055 !important;
}

/* Fecha queda debajo del nombre, sin el hueco que antes dejaba el mapa */
#page-calendar .calendar-date-v2 {
    width: 52% !important;
    min-height: 34px !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
}

/* TOP 3 sube porque ya no existe una fila exclusiva para el mapa */
#page-calendar .calendar-podium-section {
    clear: both !important;
    margin-top: 2px !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1200px) {

    #page-calendar .calendar-card-heading {
        padding-right: 45% !important;
    }

    #page-calendar .calendar-track-stage {
        width: 40% !important;
        right: 16px !important;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        max-width: 190px !important;
        height: 80px !important;
        max-height: 80px !important;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 720px) {

    #page-calendar .calendar-card-heading {
        min-height: 88px !important;
        padding-right: 43% !important;
    }

    #page-calendar .calendar-track-stage {
        top: 70px !important;
        right: 12px !important;
        width: 38% !important;
        height: 90px !important;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        max-width: 145px !important;
        height: 68px !important;
        max-height: 68px !important;
    }

    #page-calendar .calendar-track-stage .calendar-round-watermark {
        font-size: 42px !important;
    }

    #page-calendar .calendar-date-v2 {
        width: 58% !important;
    }
}

/* =========================================================
   CALENDARIO F1 - AUMENTAR TAMAÑO DEL TRAZADO
   ========================================================= */

#page-calendar .calendar-track-stage {
    width: 46% !important;
    height: 125px !important;
}

#page-calendar .calendar-track-stage .calendar-track-image {
    width: 100% !important;
    max-width: 285px !important;

    height: 115px !important;
    max-height: 115px !important;

    object-fit: contain !important;
}


/* TABLET */
@media (max-width: 1200px) {

    #page-calendar .calendar-track-stage {
        width: 44% !important;
        height: 115px !important;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        max-width: 250px !important;
        height: 105px !important;
        max-height: 105px !important;
    }
}


/* MÓVIL */
@media (max-width: 720px) {

    #page-calendar .calendar-track-stage {
        width: 42% !important;
        height: 95px !important;
    }

    #page-calendar .calendar-track-stage .calendar-track-image {
        max-width: 200px !important;
        height: 88px !important;
        max-height: 88px !important;
    }
}


/* EDITOR FOTO PILOTO */
body.stats-photo-cropper-open{overflow:hidden!important}
.stats-photo-cropper-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px}
.stats-photo-cropper-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(8px)}
.stats-photo-cropper-card{position:relative;z-index:1;width:min(100%,520px);max-height:calc(100vh - 32px);overflow:auto;padding:24px;border:1px solid #303030;border-radius:20px;background:#111;box-shadow:0 28px 90px rgba(0,0,0,.72)}
.stats-photo-cropper-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.stats-photo-cropper-header span{display:block;margin-bottom:6px;color:var(--team-primary);font-size:10px;font-weight:900;letter-spacing:2px}
.stats-photo-cropper-header h2{margin:0;font-size:25px}
.stats-photo-cropper-header button{width:40px;height:40px;border:1px solid #333;border-radius:50%;background:#181818;color:#fff;cursor:pointer}
.stats-photo-cropper-card>p{margin:12px 0 18px;color:#999;font-size:13px;line-height:1.5}
.stats-photo-cropper-viewport{position:relative;width:min(100%,420px);aspect-ratio:1;margin:auto;overflow:hidden;border:1px solid #303030;border-radius:18px;background:#080808;cursor:grab;touch-action:none;user-select:none}
.stats-photo-cropper-viewport:active{cursor:grabbing}
#statisticsPhotoCropperCanvas{display:block;width:100%;height:100%}
.stats-photo-cropper-guide{position:absolute;inset:8%;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.28);pointer-events:none}
.stats-photo-cropper-guide:before,.stats-photo-cropper-guide:after{content:"";position:absolute;background:rgba(255,255,255,.22)}
.stats-photo-cropper-guide:before{top:50%;left:0;right:0;height:1px}.stats-photo-cropper-guide:after{top:0;bottom:0;left:50%;width:1px}
.stats-photo-cropper-zoom{display:grid;grid-template-columns:24px 1fr 24px;align-items:center;gap:10px;width:min(100%,420px);margin:18px auto 0;color:#aaa;font-size:22px;font-weight:800;text-align:center}
.stats-photo-cropper-zoom input{width:100%;accent-color:var(--team-primary)}
.stats-photo-cropper-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;margin-top:20px}
.stats-photo-cropper-actions button{min-height:48px;border-radius:10px;font-size:12px;font-weight:900;letter-spacing:.7px;cursor:pointer}
.stats-photo-cropper-actions .secondary{border:1px solid #353535;background:#171717;color:#ddd}
.stats-photo-cropper-actions .primary{border:1px solid var(--team-primary);background:var(--team-primary);color:#fff}
@media(max-width:560px){.stats-photo-cropper-modal{padding:12px;align-items:flex-end}.stats-photo-cropper-card{padding:18px;border-radius:20px 20px 12px 12px}.stats-photo-cropper-actions{grid-template-columns:1fr}.stats-photo-cropper-actions .primary{order:-1}}

/* =========================================
   CORRECCIÓN BOTÓN CERRAR - ESTADÍSTICAS
   Evita choque con el menú principal
========================================= */

@media (max-width: 768px) {

    #statisticsManagerModal .modal-close,
    #statisticsManagerModal .close-button,
    .statistics-manager-modal .modal-close,
    .statistics-manager-modal .close-button {
        top: 24px !important;
        right: 105px !important;
        z-index: 10020 !important;
    }

}

/* =========================================================
   CALCULADORA IA F1 26
   CORRECCIÓN FINAL DE TIPOGRAFÍA
   ========================================================= */

/* F1 26 */
.ai-calculator-header small {
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
}

/* TÍTULO PRINCIPAL */
.ai-calculator-header h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

/* DESCRIPCIÓN DEBAJO DEL TÍTULO */
.ai-calculator-header p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #a8a8a8 !important;
}


/* =========================================================
   CABECERA DE LA TARJETA
   ========================================================= */

/* CALCULADORA DE DIFICULTAD */
.ai-calculator-card-header small {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
}

/* TIEMPO DE CLASIFICACIÓN */
.ai-calculator-card-header h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}


/* =========================================================
   CAMPOS
   ========================================================= */

/* CIRCUITO / TU MEJOR VUELTA */
.ai-calculator-field label {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 10px !important;
}

/* SELECTOR DE CIRCUITO */
.ai-calculator-field .race-select {
    height: 52px !important;
    font-size: 15px !important;
    padding: 0 16px !important;
}


/* =========================================================
   TIEMPO
   ========================================================= */

/* 1 : 30 . 508 */
.ai-time-input input {
    height: 58px !important;
    font-size: 25px !important;
    font-weight: 900 !important;
}

/* MIN / SEG / MIL */
.ai-time-input small {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    color: #858585 !important;
}

/* : y . */
.ai-time-separator {
    font-size: 27px !important;
    font-weight: 900 !important;
    color: #8b8b8b !important;
}


/* =========================================================
   BOTÓN CALCULAR
   ========================================================= */

.ai-calculator-button {
    height: 54px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
}


/* =========================================================
   MENSAJES / ESTADO
   ========================================================= */

.ai-calculator-status {
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* =========================================================
   AVISO INFERIOR
   ========================================================= */

.ai-calculator-info {
    gap: 12px !important;
    padding: 16px 18px !important;
}

.ai-calculator-info p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #9a9a9a !important;
}


/* =========================================================
   RESULTADO
   ========================================================= */

.ai-result-main-label {
    font-size: 11px !important;
}

.ai-result-main-number {
    font-size: 76px !important;
}

.ai-result-main-range {
    font-size: 14px !important;
}


/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 1100px) {

    .ai-calculator-header h1 {
        font-size: 28px !important;
    }

    .ai-calculator-header p {
        font-size: 14px !important;
    }

    .ai-calculator-card-header h2 {
        font-size: 20px !important;
    }

    .ai-calculator-field label {
        font-size: 13px !important;
    }

    .ai-calculator-field .race-select {
        font-size: 14px !important;
    }

    .ai-time-input input {
        height: 54px !important;
        font-size: 22px !important;
    }

    .ai-time-input small {
        font-size: 10px !important;
    }

    .ai-time-separator {
        font-size: 23px !important;
    }

    .ai-calculator-button {
        font-size: 13px !important;
    }

    .ai-calculator-info p {
        font-size: 12px !important;
    }
}


/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 480px) {

    .ai-calculator-header h1 {
        font-size: 25px !important;
    }

    .ai-calculator-header p {
        font-size: 13px !important;
    }

    .ai-calculator-card-header small {
        font-size: 10px !important;
    }

    .ai-calculator-card-header h2 {
        font-size: 19px !important;
    }

    .ai-calculator-field label {
        font-size: 13px !important;
    }

    .ai-time-input input {
        font-size: 20px !important;
    }

    .ai-time-input small {
        font-size: 9px !important;
    }

    .ai-calculator-info p {
        font-size: 12px !important;
    }
}

/* =========================================================
   CALENDARIO F1
   CONTADOR + MOSTRAR TOP 3 EN INICIO
========================================================= */

#page-calendar .calendar-section-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}


/* CONTADOR DE GRANDES PREMIOS */
#page-calendar .calendar-race-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 38px !important;
    padding: 0 14px !important;

    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, .025) !important;

    color: rgba(255, 255, 255, .60) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}


/* TARJETA / SWITCH TOP 3 */
#page-calendar .calendar-podium-toggle {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    min-height: 52px !important;
    padding: 8px 10px 8px 16px !important;

    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 14px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .015)
        ) !important;

    cursor: pointer !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease !important;
}


/* HOVER */
#page-calendar .calendar-podium-toggle:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            rgba(255,255,255,.12)
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            rgba(255,255,255,.025)
        ) !important;
}


/* TEXTO */
#page-calendar .calendar-podium-toggle > span {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;

    line-height: 1.15 !important;
}


#page-calendar .calendar-podium-toggle strong {
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 850 !important;

    letter-spacing: .01em !important;
}


#page-calendar .calendar-podium-toggle small {
    color: var(--team-primary) !important;

    font-size: 10px !important;
    font-weight: 850 !important;

    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}


/* OCULTAR CHECKBOX NATIVO */
#page-calendar .calendar-podium-toggle input {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none !important;
}


/* SWITCH */
#page-calendar .calendar-podium-toggle i {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 44px !important;
    height: 24px !important;

    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.08) !important;

    transition:
        background .22s ease,
        border-color .22s ease !important;
}


/* BOLITA */
#page-calendar .calendar-podium-toggle i::before {
    content: "" !important;

    position: absolute !important;

    top: 3px !important;
    left: 3px !important;

    width: 16px !important;
    height: 16px !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.75) !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.35) !important;

    transition:
        transform .22s ease,
        background .22s ease !important;
}


/* ACTIVADO */
#page-calendar
.calendar-podium-toggle
input:checked + i {

    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 75%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #101010
        ) !important;
}


#page-calendar
.calendar-podium-toggle
input:checked + i::before {

    transform:
        translateX(20px) !important;

    background:
        var(--team-primary) !important;

    box-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            transparent
        ) !important;
}


/* =========================================================
   TABLET / MÓVIL
========================================================= */

@media (max-width: 720px) {

    #page-calendar .calendar-section-header {
        align-items: stretch !important;
        gap: 18px !important;
    }

    #page-calendar .calendar-section-actions {
        width: 100% !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 8px !important;
    }

    #page-calendar .calendar-race-count {
        justify-content: flex-start !important;

        min-height: 32px !important;

        padding: 0 !important;

        border: none !important;
        background: transparent !important;
    }

    #page-calendar .calendar-podium-toggle {
        width: 100% !important;

        min-height: 56px !important;

        padding: 9px 10px 9px 14px !important;
    }

    #page-calendar .calendar-podium-toggle strong {
        font-size: 14px !important;
    }

    #page-calendar .calendar-podium-toggle small {
        font-size: 10px !important;
    }
}


/* =========================================================
   CALENDARIO F1 2026
   ÚLTIMO PODIO DEBAJO DE PRÓXIMO GRAN PREMIO
   DISEÑO MINIMALISTA
========================================================= */

#page-calendar #latestF1PodiumCard {
    position: relative !important;
    width: 100% !important;

    margin-top: 14px !important;
    padding: 18px 20px !important;

    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ) !important;

    overflow: hidden !important;
}


/* LÍNEA SUPERIOR CON COLOR DE ESCUDERÍA */
#page-calendar #latestF1PodiumCard::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 18px !important;
    right: 18px !important;

    height: 2px !important;

    border-radius: 0 0 999px 999px !important;

    background:
        linear-gradient(
            90deg,
            var(--team-primary),
            transparent 75%
        ) !important;
}


/* CABECERA */
#page-calendar #latestF1PodiumCard .f1-podium-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    margin-bottom: 14px !important;
}


#page-calendar #latestF1PodiumCard .f1-podium-head > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}


/* ÚLTIMA CARRERA COMPLETADA */
#page-calendar #latestF1PodiumCard .f1-podium-head span {
    display: block !important;

    color: var(--team-primary) !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}


/* ÚLTIMO TOP 3 */
#page-calendar #latestF1PodiumCard .f1-podium-head h3 {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}


/* NOMBRE DEL CIRCUITO */
#page-calendar #latestF1PodiumCard .f1-podium-head p {
    margin: 1px 0 0 !important;

    color: rgba(255,255,255,.55) !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
}


/* GRID TOP 3 */
#page-calendar #latestF1PodiumCard .calendar-podium-v2 {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
}


/* TARJETA DE CADA PILOTO */
#page-calendar #latestF1PodiumCard .calendar-podium-driver-v2 {
    position: relative !important;

    min-width: 0 !important;
    min-height: 76px !important;

    padding: 11px 12px 10px 14px !important;

    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(0,0,0,.16)
        ) !important;

    overflow: hidden !important;
}


/* LÍNEA DE COLOR DEL EQUIPO */
#page-calendar #latestF1PodiumCard .calendar-podium-driver-v2::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 3px !important;

    background:
        var(
            --driver-team-color,
            var(--team-primary)
        ) !important;
}


/* MEDALLA */
#page-calendar #latestF1PodiumCard .calendar-podium-medal {
    margin-bottom: 2px !important;

    font-size: 17px !important;
    line-height: 1 !important;
}


/* P1 / P2 / P3 */
#page-calendar #latestF1PodiumCard .calendar-podium-position {
    color: rgba(255,255,255,.45) !important;

    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: .08em !important;
}


/* INFO PILOTO */
#page-calendar #latestF1PodiumCard .calendar-podium-driver-info {
    display: flex !important;
    flex-direction: column !important;

    margin-top: 2px !important;
}


/* CÓDIGO PILOTO */
#page-calendar #latestF1PodiumCard .calendar-podium-driver-info > strong {
    color: #ffffff !important;

    font-size: 16px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}


/* NOMBRE COMPLETO */
#page-calendar #latestF1PodiumCard .calendar-podium-driver-info > span {
    display: none !important;
}


/* ESCUDERÍA */
#page-calendar #latestF1PodiumCard .calendar-podium-driver-info > small {
    margin-top: 3px !important;

    color: rgba(255,255,255,.48) !important;

    font-size: 10px !important;
    line-height: 1.1 !important;
}


/* ESTADO VACÍO */
#page-calendar #latestF1PodiumCard .calendar-empty,
#page-calendar #latestF1PodiumCard .calendar-podium-empty {
    padding: 14px !important;

    color: rgba(255,255,255,.55) !important;

    font-size: 13px !important;
    text-align: center !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #page-calendar #latestF1PodiumCard {
        padding: 16px !important;
    }

    #page-calendar #latestF1PodiumCard .f1-podium-head h3 {
        font-size: 19px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-v2 {
        gap: 8px !important;
    }
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    #page-calendar #latestF1PodiumCard {
        margin-top: 10px !important;

        padding:
            15px 12px 12px !important;

        border-radius: 14px !important;
    }

    #page-calendar #latestF1PodiumCard::before {
        left: 12px !important;
        right: 12px !important;
    }

    #page-calendar #latestF1PodiumCard .f1-podium-head {
        margin-bottom: 11px !important;
    }

    #page-calendar #latestF1PodiumCard .f1-podium-head span {
        font-size: 9px !important;
    }

    #page-calendar #latestF1PodiumCard .f1-podium-head h3 {
        font-size: 18px !important;
    }

    #page-calendar #latestF1PodiumCard .f1-podium-head p {
        font-size: 12px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-v2 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-driver-v2 {
        min-height: 69px !important;

        padding:
            9px 7px 8px 10px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-medal {
        font-size: 15px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-position {
        font-size: 8px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-driver-info > strong {
        font-size: 14px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-driver-info > small {
        font-size: 9px !important;
    }
}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width: 390px) {

    #page-calendar #latestF1PodiumCard {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-v2 {
        gap: 5px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-driver-v2 {
        padding-left: 8px !important;
        padding-right: 5px !important;
    }

    #page-calendar #latestF1PodiumCard .calendar-podium-driver-info > small {
        display: none !important;
    }
}

/* =========================================================
   MÓVIL - ÚLTIMO TOP 3 ALINEADO A LA IZQUIERDA
========================================================= */

@media (max-width: 600px) {

    #page-calendar #latestF1PodiumCard .f1-podium-head {
        width: 100% !important;

        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        text-align: left !important;
    }


    #page-calendar #latestF1PodiumCard .f1-podium-head > div {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        text-align: left !important;
    }


    #page-calendar #latestF1PodiumCard .f1-podium-head span,
    #page-calendar #latestF1PodiumCard .f1-podium-head h3,
    #page-calendar #latestF1PodiumCard .f1-podium-head p {
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }
}

/* =========================================================
   INGENIERO IA - CHAT FLOTANTE
========================================================= */

.ai-engineer-floating-root {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 5000;
    pointer-events: none;
}

.ai-engineer-floating-button,
.ai-engineer-floating-panel {
    pointer-events: auto;
}

.ai-engineer-floating-button {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 70%,
            rgba(255,255,255,.14)
        );

    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #111
        );

    color: #fff;
    box-shadow:
        0 14px 38px rgba(0,0,0,.50),
        0 0 22px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        );

    cursor: pointer;
    overflow: visible;
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.ai-engineer-floating-button:hover {
    transform: translateY(-2px) scale(1.03);
}

.ai-engineer-floating-icon {
    position: relative;
    z-index: 2;
    font-size: 27px;
}

.ai-engineer-floating-pulse {
    position: absolute;
    inset: -4px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 46%,
            transparent
        );

    border-radius: 50%;
    opacity: .7;
    animation: aiEngineerPulse 2.2s infinite ease-out;
}

@keyframes aiEngineerPulse {
    0% {
        transform: scale(.88);
        opacity: .65;
    }

    75% {
        transform: scale(1.22);
        opacity: 0;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}


.ai-engineer-floating-panel {
    position: absolute;
    right: 0;
    bottom: 74px;

    width: min(390px, calc(100vw - 32px));
    height: min(610px, calc(100vh - 120px));

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 50% 0%,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                transparent
            ),
            transparent 34%
        ),
        #0b0b0b;

    box-shadow:
        0 26px 80px rgba(0,0,0,.68);

    overflow: hidden;
}


.ai-engineer-floating-header {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 12px 10px 14px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.ai-engineer-floating-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-engineer-floating-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 45%,
            rgba(255,255,255,.08)
        );

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #111
        );

    font-size: 18px;
}

.ai-engineer-floating-title-wrap strong {
    display: block;
    overflow: hidden;

    max-width: 175px;

    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-engineer-floating-title-wrap span {
    display: block;
    margin-top: 3px;

    color: rgba(255,255,255,.42);

    font-size: 9px;
    letter-spacing: .03em;
}

.ai-engineer-floating-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-engineer-floating-header-button {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 9px;

    background: transparent;
    color: rgba(255,255,255,.66);

    cursor: pointer;
}

.ai-engineer-floating-header-button:hover {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #fff;
}


.ai-engineer-floating-history {
    position: absolute;
    inset: 66px 0 0 0;
    z-index: 5;

    padding: 12px;

    background: rgba(8,8,8,.98);
    backdrop-filter: blur(14px);

    overflow-y: auto;
}

.ai-engineer-floating-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;
}

.ai-engineer-floating-history-head strong {
    font-size: 12px;
}

.ai-engineer-floating-history-head button {
    border: none;
    background: transparent;
    color: var(--team-primary);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}


.ai-engineer-conversation-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ai-engineer-sidebar-empty {
    padding: 18px 10px;
    color: rgba(255,255,255,.42);
    font-size: 12px;
    line-height: 1.5;
}

.ai-engineer-conversation-item {
    width: 100%;
    padding: 11px 12px;

    border: 1px solid transparent;
    border-radius: 11px;

    background: transparent;
    color: #fff;

    text-align: left;
    cursor: pointer;
}

.ai-engineer-conversation-item:hover {
    background: rgba(255,255,255,.035);
}

.ai-engineer-conversation-item.active {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            rgba(255,255,255,.02)
        );
}

.ai-engineer-conversation-item strong {
    display: block;
    overflow: hidden;

    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-engineer-conversation-item small {
    display: block;
    margin-top: 4px;

    color: rgba(255,255,255,.36);
    font-size: 9px;
}


.ai-engineer-messages {
    flex: 1;
    min-height: 0;

    overflow-y: auto;

    padding: 20px 14px;

    scroll-behavior: smooth;
}

.ai-engineer-welcome {
    max-width: 310px;
    margin: 42px auto 0;
    text-align: center;
}

.ai-engineer-welcome-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            rgba(255,255,255,.08)
        );

    border-radius: 16px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            #111
        );

    font-size: 24px;
}

.ai-engineer-welcome h2 {
    font-size: 20px;
}

.ai-engineer-welcome p {
    margin-top: 9px;

    color: rgba(255,255,255,.53);

    font-size: 12px;
    line-height: 1.55;
}

.ai-engineer-suggestions {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 18px;
}

.ai-engineer-suggestions button {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;

    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.72);

    font-size: 10px;
    text-align: left;

    cursor: pointer;
}

.ai-engineer-suggestions button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 50%,
            rgba(255,255,255,.08)
        );

    color: #fff;
}


.ai-engineer-message {
    display: flex;
    margin-bottom: 14px;
}

.ai-engineer-message.user {
    justify-content: flex-end;
}

.ai-engineer-message.assistant {
    justify-content: flex-start;
}

.ai-engineer-message-bubble {
    max-width: 86%;

    padding: 11px 12px;

    border-radius: 14px;

    font-size: 12px;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-engineer-message.user .ai-engineer-message-bubble {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );

    border-bottom-right-radius: 5px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 13%,
            #151515
        );
}

.ai-engineer-message.assistant .ai-engineer-message-bubble {
    border: 1px solid rgba(255,255,255,.07);
    border-bottom-left-radius: 5px;

    background: rgba(255,255,255,.035);
}

.ai-engineer-message-meta {
    margin-top: 5px;

    color: rgba(255,255,255,.28);

    font-size: 8px;
}


.ai-engineer-composer {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        42px;

    align-items: end;

    gap: 8px;

    margin: 0 10px 8px;
    padding: 8px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;

    background: #111;
}

.ai-engineer-composer:focus-within {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 52%,
            rgba(255,255,255,.1)
        );
}

#aiEngineerInput {
    width: 100%;
    min-height: 40px;
    max-height: 135px;

    padding: 9px 7px;

    resize: none;
    overflow-y: auto;

    border: none;
    outline: none;

    background: transparent;
    color: #fff;

    font: inherit;
    font-size: 12px;
    line-height: 1.5;
}

#aiEngineerInput::placeholder {
    color: rgba(255,255,255,.34);
}

.ai-engineer-send-button {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 11px;

    background: var(--team-primary);
    color: #fff;

    font-size: 17px;

    cursor: pointer;
}

.ai-engineer-send-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ai-engineer-status {
    min-height: 15px;

    margin: 0 12px 8px;

    color: rgba(255,255,255,.38);

    font-size: 9px;
    text-align: center;
}


@media (max-width: 600px) {

    .ai-engineer-floating-root {
        right: 14px;
        bottom: 14px;
    }

    .ai-engineer-floating-button {
        width: 54px;
        height: 54px;
    }

    .ai-engineer-floating-panel {
        position: fixed;

        left: 10px;
        right: 10px;
        bottom: 78px;

        width: auto;
        height: min(620px, calc(100dvh - 98px));

        border-radius: 18px;
    }

    .ai-engineer-floating-title-wrap strong {
        max-width: 145px;
    }

    .ai-engineer-messages {
        padding: 17px 11px;
    }
}


/* =========================================
   INGENIERO IA - HISTORIAL / ELIMINAR CHAT
========================================= */

.ai-engineer-conversation-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.ai-engineer-conversation-row .ai-engineer-conversation-item {
    flex: 1;
    min-width: 0;
}

.ai-engineer-conversation-delete {
    width: 36px;
    min-width: 36px;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent;
    color: #8f8f8f;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;

    cursor: pointer;

    opacity: 0.72;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

.ai-engineer-conversation-delete:hover {
    background: rgba(255, 87, 87, 0.12);
    border-color: rgba(255, 87, 87, 0.45);
    color: var(--danger);
    opacity: 1;
    transform: translateY(-1px);
}

.ai-engineer-conversation-delete:active {
    transform: translateY(0);
}

@media (max-width: 700px) {
    .ai-engineer-conversation-row {
        gap: 6px;
    }

    .ai-engineer-conversation-delete {
        width: 34px;
        min-width: 34px;
        border-radius: 8px;
    }
}


/* =========================================================
   MIS ESTADÍSTICAS - CHAVITOXO TELEMETRY CONNECTOR
========================================================= */

#page-history .telemetry-pairing-card {
    width: 100%;
    min-width: 0;

    padding: 20px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            rgba(255,255,255,.10)
        );

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 0% 0%,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                transparent
            ),
            transparent 38%
        ),
        rgba(12,18,25,.82);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}


#page-history .telemetry-pairing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


#page-history .telemetry-pairing-heading {
    min-width: 0;
}


#page-history .telemetry-pairing-kicker {
    display: block;

    margin-bottom: 6px;

    color: var(--team-primary);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}


#page-history .telemetry-pairing-heading h3 {
    margin: 0;

    font-size: 17px;
    letter-spacing: -.01em;
}


#page-history .telemetry-pairing-heading p {
    max-width: 680px;

    margin: 7px 0 0;

    color: rgba(255,255,255,.58);

    font-size: 12px;
    line-height: 1.55;
}


#page-history .telemetry-connector-status {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding: 6px 10px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;

    background: rgba(255,255,255,.025);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    white-space: nowrap;
}


#page-history .telemetry-connector-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: currentColor;

    box-shadow:
        0 0 10px currentColor;
}


#page-history .telemetry-connector-status.disconnected {
    color: #ff6b6b;
}


#page-history .telemetry-connector-status.connected {
    color: #46d990;
}


#page-history .telemetry-connector-device-info {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 16px;
}


#page-history .telemetry-connector-device-info > div {
    min-width: 0;

    padding: 12px 13px;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;

    background: rgba(5,10,15,.42);
}


#page-history .telemetry-connector-device-info small {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,.42);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}


#page-history .telemetry-connector-device-info strong {
    display: block;

    overflow: hidden;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


#page-history .telemetry-pairing-code-box {
    margin-top: 16px;

    padding: 18px;

    border: 1px dashed
        color-mix(
            in srgb,
            var(--team-primary) 40%,
            rgba(255,255,255,.13)
        );

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            rgba(5,10,15,.5)
        );

    text-align: center;
}


#page-history .telemetry-pairing-code-label {
    display: block;

    color: rgba(255,255,255,.46);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
}


#page-history .telemetry-pairing-code-box strong {
    display: block;

    margin: 8px 0 6px;

    color: #ffffff;

    font-size: clamp(21px, 3vw, 28px);
    font-weight: 950;
    letter-spacing: .09em;

    font-variant-numeric: tabular-nums;
}


#page-history .telemetry-pairing-code-box small {
    color: rgba(255,255,255,.48);

    font-size: 10px;
}


#page-history .telemetry-pairing-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 15px;
}


#page-history .telemetry-pairing-primary,
#page-history .telemetry-pairing-secondary {
    min-height: 40px;

    padding: 9px 14px;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}


#page-history .telemetry-pairing-primary {
    border: 0;

    background: var(--team-primary);

    color: #ffffff;
}


#page-history .telemetry-pairing-secondary {
    border: 1px solid rgba(255,255,255,.13);

    background: rgba(255,255,255,.035);

    color: #ffffff;
}


#page-history .telemetry-pairing-primary:hover,
#page-history .telemetry-pairing-secondary:hover {
    transform: translateY(-1px);
}


#page-history .telemetry-pairing-primary:disabled {
    cursor: wait;

    opacity: .55;

    transform: none;
}


#page-history .telemetry-pairing-message {
    min-height: 18px;

    margin-top: 10px;

    color: rgba(255,255,255,.55);

    font-size: 11px;
}


#page-history .telemetry-pairing-message.success {
    color: #55d98a;
}


#page-history .telemetry-pairing-message.error {
    color: #ff7878;
}


@media (max-width: 700px) {

    #page-history .telemetry-pairing-card {
        padding: 16px;
    }


    #page-history .telemetry-pairing-header {
        flex-direction: column;

        gap: 12px;
    }


    #page-history .telemetry-connector-device-info {
        grid-template-columns: 1fr;
    }


    #page-history .telemetry-pairing-actions {
        flex-direction: column;
    }


    #page-history .telemetry-pairing-primary,
    #page-history .telemetry-pairing-secondary {
        width: 100%;
    }
}

/* =========================================================
   FIX FINAL - ESTRATEGIA EN MÓVIL
   Permite que la tarjeta crezca según todo el contenido
   y evita que el footer se superponga.
========================================================= */

@media (max-width: 700px) {

    .circuit-top-layout {
        align-items: start !important;
    }

    .circuit-strategy-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 18px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;

        overflow: visible !important;
    }

    .circuit-strategy-panel .strategy-header {
        flex: none !important;
    }

    .circuit-strategy-panel .strategy-text {
        flex: none !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin-top: 20px !important;

        overflow: visible !important;
    }

    .circuit-strategy-panel .strategy-footer {
        position: static !important;

        width: 100% !important;
        height: auto !important;

        margin-top: 18px !important;
        padding-top: 14px !important;

        flex: none !important;
        flex-direction: column !important;
        gap: 6px !important;

        transform: none !important;
    }
}

/* Quitar flecha del widget Último Top 3 */
.home-f1-podium-head button {
    display: none !important;
}


/* =========================================================
   TELEMETRÍA - RESULTADOS DETECTADOS
========================================================= */

#page-history .telemetry-pending-results-section {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,.09)
        );
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 6%,
                rgba(12,16,22,.92)
            ),
            rgba(9,12,17,.94)
        );
}


#page-history .telemetry-pending-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}


#page-history .telemetry-pending-results-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--team-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}


#page-history .telemetry-pending-results-head h3 {
    margin: 0;
    font-size: 17px;
}


#page-history .telemetry-pending-results-head p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.52);
    font-size: 11px;
}


#page-history .telemetry-pending-results-count {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.72);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
}


#page-history .telemetry-pending-results-list {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}


#page-history .telemetry-pending-result-card {
    padding: 15px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(3,7,11,.48);
}


#page-history .telemetry-pending-result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}


#page-history .telemetry-pending-result-top > div {
    min-width: 0;
}


#page-history .telemetry-pending-result-circuit {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}


#page-history .telemetry-pending-result-top small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.44);
    font-size: 10px;
}


#page-history .telemetry-pending-result-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 35%,
            transparent
        );
    border-radius: 999px;
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .08em;
}


#page-history .telemetry-pending-result-stats {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}


#page-history .telemetry-pending-result-stats > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
}


#page-history .telemetry-pending-result-stats small {
    display: block;
    color: rgba(255,255,255,.40);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .07em;
}


#page-history .telemetry-pending-result-stats strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}


#page-history .telemetry-pending-destination {
    margin-top: 13px;
}


#page-history .telemetry-pending-destination > label {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,.46);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
}


#page-history .telemetry-pending-destination-buttons {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(0,0,0,.22);
}


#page-history .telemetry-pending-destination-button {
    min-width: 82px;
    padding: 7px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,.48);
    font-size: 9px;
    font-weight: 900;
    cursor: pointer;
}


#page-history .telemetry-pending-destination-button.is-active {
    background: var(--team-primary);
    color: #fff;
}


#page-history .telemetry-pending-league-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}


#page-history .telemetry-pending-select {
    width: 100%;
    height: 39px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    outline: none;
    background: #090d12;
    color: #fff;
    font-size: 10px;
}


#page-history .telemetry-pending-select:focus {
    border-color: var(--team-primary);
}


#page-history .telemetry-pending-warning {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(255,190,70,.22);
    border-radius: 9px;
    background: rgba(255,190,70,.055);
    color: #ffd27a;
    font-size: 10px;
}


#page-history .telemetry-pending-result-status {
    min-height: 16px;
    margin-top: 9px;
    color: rgba(255,255,255,.55);
    font-size: 10px;
}


#page-history .telemetry-pending-result-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}


#page-history .telemetry-pending-save,
#page-history .telemetry-pending-discard {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
    cursor: pointer;
}


#page-history .telemetry-pending-save {
    border: 0;
    background: var(--team-primary);
    color: #fff;
}


#page-history .telemetry-pending-save:disabled {
    opacity: .5;
    cursor: wait;
}


#page-history .telemetry-pending-discard {
    border: 1px solid rgba(255,87,87,.28);
    background: rgba(255,87,87,.045);
    color: #ff8989;
}


@media (max-width: 760px) {

    #page-history .telemetry-pending-result-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    #page-history .telemetry-pending-league-fields {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 520px) {

    #page-history .telemetry-pending-results-section {
        padding: 14px;
    }


    #page-history .telemetry-pending-results-head {
        flex-direction: column;
    }


    #page-history .telemetry-pending-result-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    #page-history .telemetry-pending-destination-buttons {
        width: 100%;
    }


    #page-history .telemetry-pending-destination-button {
        flex: 1;
    }


    #page-history .telemetry-pending-result-actions {
        flex-direction: column;
    }


    #page-history .telemetry-pending-save,
    #page-history .telemetry-pending-discard {
        width: 100%;
    }
}


/* =========================================================
   ESTADÍSTICAS - ÚLTIMAS 5 CARRERAS V7
   ========================================================= */

/* Escritorio: ocupa todo el ancho de manera equilibrada */
body #page-history .stats-race-row.stats-race-row-expanded,
#page-home .home-stats-recent .stats-race-row.stats-race-row-expanded {
    display: grid;
    grid-template-columns:
        34px
        minmax(230px, 1.7fr)
        minmax(100px, .75fr)
        minmax(100px, .75fr)
        minmax(110px, .8fr)
        minmax(130px, .95fr)
        minmax(85px, .6fr);
    gap: 18px;
    align-items: center;
    width: 100%;
    min-height: 70px;
    padding: 11px 8px;
}

body #page-history .stats-race-row-expanded > *,
#page-home .home-stats-recent .stats-race-row-expanded > * {
    min-width: 0;
}

body #page-history .stats-race-main strong,
body #page-history .stats-race-main small,
#page-home .home-stats-recent .stats-race-main strong,
#page-home .home-stats-recent .stats-race-main small {
    display: block;
    margin: 0;
}

body #page-history .stats-race-main strong,
#page-home .home-stats-recent .stats-race-main strong {
    font-size: 14px;
    line-height: 1.15;
}

body #page-history .stats-race-main small,
#page-home .home-stats-recent .stats-race-main small {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255,255,255,.5);
}

body #page-history .stats-race-extra,
#page-home .home-stats-recent .stats-race-extra {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-width: 0;
}

body #page-history .stats-race-extra small,
#page-home .home-stats-recent .stats-race-extra small {
    margin: 0;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .4px;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    white-space: nowrap;
}

body #page-history .stats-race-extra strong,
#page-home .home-stats-recent .stats-race-extra strong {
    margin: 0;
    font-size: 12px;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
}

body #page-history .stats-race-result,
#page-home .home-stats-recent .stats-race-result {
    text-align: right;
}


/* =========================================================
   CELULAR
   Cada carrera se convierte en una ficha ordenada.
   ========================================================= */

@media (max-width: 650px) {

    body #page-history .stats-race-row.stats-race-row-expanded,
    #page-home .home-stats-recent .stats-race-row.stats-race-row-expanded {
        display: grid !important;
        grid-template-columns: 26px minmax(0, 1fr) minmax(88px, auto) !important;
        grid-template-areas:
            "flag main result"
            ". format laps"
            ". quali bestlap" !important;
        gap: 12px 14px !important;
        align-items: start !important;
        padding: 16px 6px !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-flag,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-flag {
        grid-area: flag !important;
        align-self: center !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-main,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-main {
        grid-area: main !important;
        min-width: 0 !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-format,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-format {
        grid-area: format !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-laps,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-laps {
        grid-area: laps !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-quali,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-quali {
        grid-area: quali !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-bestlap,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-bestlap {
        grid-area: bestlap !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-result,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-result {
        grid-area: result !important;
        display: flex !important;
        text-align: right !important;
        align-items: flex-end !important;
        min-width: 0 !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-extra,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-extra {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        text-align: left !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-result,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-result {
        justify-self: end !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-extra small,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-extra small {
        display: block !important;
        font-size: 8px !important;
        white-space: nowrap !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-extra strong,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-extra strong {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-main strong,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-main strong {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-main small,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-main small {
        font-size: 9px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 420px) {
    body #page-history .stats-race-row.stats-race-row-expanded,
    #page-home .home-stats-recent .stats-race-row.stats-race-row-expanded {
        grid-template-columns: 23px minmax(0, 1fr) minmax(78px, auto) !important;
        gap: 11px 10px !important;
        padding: 15px 3px !important;
    }

    body #page-history .stats-race-row-expanded .stats-race-extra strong,
    #page-home .home-stats-recent .stats-race-row-expanded .stats-race-extra strong {
        font-size: 11px !important;
    }
}


/* =========================================================
   ESTADÍSTICAS - RESULTADO DESTACADO V8
   ========================================================= */

body #page-history .stats-race-result,
#page-home .home-stats-recent .stats-race-result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

body #page-history .stats-race-result strong,
#page-home .home-stats-recent .stats-race-result strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 65%, rgba(255,255,255,.18));
    background: color-mix(in srgb, var(--team-primary) 14%, rgba(255,255,255,.025));
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        inset 0 0 14px color-mix(in srgb, var(--team-primary) 8%, transparent),
        0 0 12px color-mix(in srgb, var(--team-primary) 10%, transparent);
}

body #page-history .stats-race-result.is-dnf strong,
#page-home .home-stats-recent .stats-race-result.is-dnf strong {
    border-color: rgba(255,87,87,.55);
    background: rgba(255,87,87,.11);
    color: #ff8d8d;
    box-shadow:
        inset 0 0 14px rgba(255,87,87,.05),
        0 0 10px rgba(255,87,87,.08);
}

@media (max-width: 650px) {
    body #page-history .stats-race-result,
    #page-home .home-stats-recent .stats-race-result {
        align-items: flex-end !important;
    }

    body #page-history .stats-race-result strong,
    #page-home .home-stats-recent .stats-race-result strong {
        min-width: 46px;
        min-height: 27px;
        padding: 5px 9px;
        font-size: 11px;
    }
}


/* =========================================================
   CARRERAS PENDIENTES - REDISEÑO COMPACTO V14
========================================================= */

.telemetry-pending-results-count {
    display: none !important;
}

.telemetry-pending-card-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 9px !important;
}

.telemetry-pending-summary-card {
    width: fit-content !important;
    min-width: 218px !important;
    max-width: 265px !important;
    min-height: 64px !important;
    padding: 9px 11px !important;
    gap: 9px !important;
    border-radius: 12px !important;
}

.telemetry-pending-summary-flag {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    background: rgba(255,255,255,.035) !important;
}

.telemetry-pending-summary-copy {
    flex: 1 1 auto !important;
}

.telemetry-pending-summary-copy strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
}

.telemetry-pending-summary-copy small {
    margin-top: 3px !important;
    font-size: 8px !important;
}

.telemetry-pending-summary-copy span {
    margin-top: 4px !important;
    font-size: 7px !important;
    letter-spacing: .07em !important;
}

.telemetry-pending-summary-arrow {
    flex: 0 0 auto;
    margin-left: 2px;
    color: var(--team-primary);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    opacity: .85;
}

.telemetry-pending-compact-section {
    margin-bottom: 12px !important;
}

.telemetry-pending-compact-header {
    margin-bottom: 8px !important;
}

.telemetry-pending-compact-kicker {
    margin-bottom: 2px !important;
    font-size: 7px !important;
}

.telemetry-pending-compact-title {
    font-size: 13px !important;
}


/* =========================================================
   MODAL - GUARDAR / DESCARTAR CARRERA
========================================================= */

.telemetry-pending-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0,0,0,.64) !important;
    backdrop-filter: blur(16px) saturate(.85) !important;
    -webkit-backdrop-filter: blur(16px) saturate(.85) !important;
}

.telemetry-pending-modal-backdrop.hidden {
    display: none !important;
}

.telemetry-pending-modal {
    position: relative !important;
    width: min(760px, 96vw) !important;
    max-height: 90vh !important;
    overflow: auto !important;
    padding: 20px !important;
    border: 1px solid color-mix(
        in srgb,
        var(--team-primary) 48%,
        rgba(255,255,255,.10)
    ) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--team-primary) 6%, #111318),
            #080b0f 58%
        ) !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,.68),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.telemetry-pending-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.78) !important;
    cursor: pointer !important;
}

.telemetry-pending-modal-head {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 45px 15px 0 !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.telemetry-pending-modal-flag {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
    font-size: 25px !important;
    line-height: 1 !important;
}

.telemetry-pending-modal-title-wrap {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.telemetry-pending-modal-kicker {
    display: block !important;
    margin-bottom: 3px !important;
    color: var(--team-primary) !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
}

.telemetry-pending-modal-head strong {
    display: block !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1.05 !important;
}

.telemetry-pending-modal-head small {
    display: block !important;
    margin-top: 4px !important;
    color: rgba(255,255,255,.44) !important;
    font-size: 9px !important;
}

.telemetry-pending-modal-state {
    flex: 0 0 auto !important;
    padding: 6px 9px !important;
    border: 1px solid color-mix(in srgb, var(--team-primary) 35%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--team-primary) 8%, transparent) !important;
    color: var(--team-primary) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.telemetry-pending-modal .telemetry-pending-result-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.telemetry-pending-modal-section-title {
    margin: 0 0 8px !important;
    color: rgba(255,255,255,.42) !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .10em !important;
}

.telemetry-pending-modal .telemetry-pending-result-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
}

.telemetry-pending-modal .telemetry-pending-stat-item {
    min-width: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.022) !important;
}

.telemetry-pending-modal .telemetry-pending-stat-item small {
    display: block !important;
    color: rgba(255,255,255,.38) !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

.telemetry-pending-modal .telemetry-pending-stat-item strong {
    display: block !important;
    margin-top: 4px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
}

.telemetry-pending-modal .telemetry-pending-destination {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.065) !important;
}

.telemetry-pending-modal .telemetry-pending-destination-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    padding: 3px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,.24) !important;
}

.telemetry-pending-modal .telemetry-pending-destination-button {
    min-height: 36px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.telemetry-pending-modal .telemetry-pending-destination-button.is-active {
    background: var(--team-primary) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--team-primary) 20%, transparent) !important;
}

.telemetry-pending-modal .telemetry-pending-league-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
    margin-top: 10px !important;
}

.telemetry-pending-modal .telemetry-pending-field {
    display: block !important;
    min-width: 0 !important;
}

.telemetry-pending-modal .telemetry-pending-field > span {
    display: block !important;
    margin: 0 0 5px !important;
    color: rgba(255,255,255,.40) !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

.telemetry-pending-modal .telemetry-pending-select {
    width: 100% !important;
    height: 39px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    outline: none !important;
    background: #0a0d12 !important;
    color: #fff !important;
    font-size: 10px !important;
}

.telemetry-pending-modal .telemetry-pending-select:focus {
    border-color: var(--team-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-primary) 12%, transparent) !important;
}

.telemetry-pending-modal .telemetry-pending-result-status {
    min-height: 16px !important;
    margin-top: 9px !important;
    color: #ffb5b5 !important;
    font-size: 9px !important;
}

.telemetry-pending-modal .telemetry-pending-result-actions {
    display: grid !important;
    grid-template-columns: 1fr .62fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.065) !important;
}

.telemetry-pending-modal .telemetry-pending-save,
.telemetry-pending-modal .telemetry-pending-discard {
    min-height: 42px !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .055em !important;
    cursor: pointer !important;
}

.telemetry-pending-modal .telemetry-pending-save {
    border: 0 !important;
    background:
        linear-gradient(
            135deg,
            var(--team-primary),
            color-mix(in srgb, var(--team-primary) 72%, #7b0000)
        ) !important;
    color: #fff !important;
}

.telemetry-pending-modal .telemetry-pending-discard {
    border: 1px solid rgba(255,87,87,.24) !important;
    background: rgba(255,87,87,.035) !important;
    color: #ff8b8b !important;
}

.telemetry-pending-modal .telemetry-pending-save:hover,
.telemetry-pending-modal .telemetry-pending-discard:hover {
    transform: translateY(-1px) !important;
}

@media (max-width: 700px) {

    .telemetry-pending-summary-card {
        width: min(100%, 245px) !important;
        min-width: 0 !important;
        min-height: 60px !important;
    }

    .telemetry-pending-modal-backdrop {
        align-items: flex-end !important;
        padding: 8px !important;
    }

    .telemetry-pending-modal {
        width: 100% !important;
        max-height: 92vh !important;
        padding: 15px !important;
        border-radius: 17px 17px 10px 10px !important;
    }

    .telemetry-pending-modal-head {
        flex-wrap: wrap !important;
        padding-right: 36px !important;
    }

    .telemetry-pending-modal-state {
        margin-left: 55px !important;
    }

    .telemetry-pending-modal .telemetry-pending-result-stats {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .telemetry-pending-modal .telemetry-pending-league-fields {
        grid-template-columns: 1fr !important;
    }

    .telemetry-pending-modal .telemetry-pending-result-actions {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   GLOBAL - DESHABILITAR LIGA / TEMPORADA
========================================================= */

.telemetry-pending-modal .telemetry-pending-league-fields.is-disabled {
    opacity: .38 !important;
    filter: grayscale(.35) !important;
    pointer-events: none !important;
    user-select: none !important;
}

.telemetry-pending-modal .telemetry-pending-league-fields.is-disabled
.telemetry-pending-select {
    cursor: not-allowed !important;
    border-color: rgba(255,255,255,.055) !important;
    background: rgba(255,255,255,.018) !important;
    color: rgba(255,255,255,.38) !important;
}

.telemetry-pending-modal .telemetry-pending-select:disabled {
    cursor: not-allowed !important;
}


/* =========================================================
   TELEMETRÍA PENDIENTE V16
   2 TARJETAS POR FILA EN MÓVIL / TABLET
========================================================= */

@media (max-width: 760px) {
    .telemetry-pending-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (max-width: 430px) {
    .telemetry-pending-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .telemetry-pending-summary-card {
        min-width: 0 !important;
        min-height: 68px !important;
        padding: 8px !important;
        gap: 7px !important;
    }

    .telemetry-pending-summary-arrow {
        display: none !important;
    }
}


/* =========================================================
   INICIO - CARRERAS PENDIENTES DENTRO DE PANEL V17
========================================================= */

[data-telemetry-pending-location="home"].telemetry-pending-compact-section {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 16px !important;

    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 30%,
            rgba(255,255,255,.09)
        ) !important;

    border-radius: 16px !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 6%,
                rgba(12,16,22,.92)
            ),
            rgba(9,12,17,.94)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 12px 28px rgba(0,0,0,.10) !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-compact-header {
    margin-bottom: 10px !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-compact-kicker {
    font-size: 8px !important;
    letter-spacing: .12em !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-compact-title {
    font-size: 15px !important;
    font-weight: 900 !important;
}

@media (max-width: 760px) {

    [data-telemetry-pending-location="home"].telemetry-pending-compact-section {
        padding: 12px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-compact-header {
        margin-bottom: 8px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-compact-title {
        font-size: 14px !important;
    }
}


/* =========================================================
   INICIO - PENDIENTES A ANCHO COMPLETO V18
   Cada carrera ocupa todo el panel.
   Si hay otra, baja debajo de la anterior.
========================================================= */

[data-telemetry-pending-location="home"]
.telemetry-pending-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 13px !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-flag {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 23px !important;
    border-radius: 10px !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy strong {
    font-size: 14px !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy small {
    font-size: 9px !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy span {
    font-size: 8px !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-arrow {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 22px !important;
}

/* Móvil: sigue siendo una tarjeta por fila, ocupando todo el ancho */
@media (max-width: 760px) {

    [data-telemetry-pending-location="home"]
    .telemetry-pending-card-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-summary-card {
        width: 100% !important;
        min-height: 68px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-summary-flag {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 21px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-summary-arrow {
        display: inline-flex !important;
    }
}


/* =========================================================
   ESTADÍSTICAS - PENDIENTES A ANCHO COMPLETO V19
   Igual que en Inicio: una carrera por fila.
========================================================= */

#telemetryPendingResultsSection
.telemetry-pending-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

#telemetryPendingResultsSection
.telemetry-pending-summary-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 13px !important;
}

#telemetryPendingResultsSection
.telemetry-pending-summary-flag {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 23px !important;
    border-radius: 10px !important;
}

#telemetryPendingResultsSection
.telemetry-pending-summary-copy strong {
    font-size: 14px !important;
}

#telemetryPendingResultsSection
.telemetry-pending-summary-copy small {
    font-size: 9px !important;
}

#telemetryPendingResultsSection
.telemetry-pending-summary-copy span {
    font-size: 8px !important;
}

#telemetryPendingResultsSection
.telemetry-pending-summary-arrow {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    font-size: 22px !important;
}

@media (max-width: 760px) {

    #telemetryPendingResultsSection
    .telemetry-pending-card-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #telemetryPendingResultsSection
    .telemetry-pending-summary-card {
        width: 100% !important;
        min-height: 68px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    #telemetryPendingResultsSection
    .telemetry-pending-summary-flag {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 21px !important;
    }

    #telemetryPendingResultsSection
    .telemetry-pending-summary-arrow {
        display: inline-flex !important;
    }
}


/* =========================================================
   PENDIENTES - CENTRADO CORRECTO DEL CONTENIDO V20
========================================================= */

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-card,
#telemetryPendingResultsSection
.telemetry-pending-summary-card {
    position: relative !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy,
#telemetryPendingResultsSection
.telemetry-pending-summary-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy strong,
[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy small,
[data-telemetry-pending-location="home"]
.telemetry-pending-summary-copy span,
#telemetryPendingResultsSection
.telemetry-pending-summary-copy strong,
#telemetryPendingResultsSection
.telemetry-pending-summary-copy small,
#telemetryPendingResultsSection
.telemetry-pending-summary-copy span {
    width: 100% !important;
    text-align: center !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-arrow,
#telemetryPendingResultsSection
.telemetry-pending-summary-arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

[data-telemetry-pending-location="home"]
.telemetry-pending-summary-flag,
#telemetryPendingResultsSection
.telemetry-pending-summary-flag {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

@media (max-width: 760px) {

    [data-telemetry-pending-location="home"]
    .telemetry-pending-summary-flag,
    #telemetryPendingResultsSection
    .telemetry-pending-summary-flag {
        left: 12px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-summary-arrow,
    #telemetryPendingResultsSection
    .telemetry-pending-summary-arrow {
        right: 12px !important;
    }

    [data-telemetry-pending-location="home"]
    .telemetry-pending-summary-copy,
    #telemetryPendingResultsSection
    .telemetry-pending-summary-copy {
        padding: 0 46px !important;
    }
}


/* =========================================================
   CABECERAS UNIFICADAS
   CALCULA TU NIVEL DE IA + MIS ESTADÍSTICAS
   MISMO FORMATO VISUAL QUE MIS SETUPS
========================================================= */

#page-calculator .ai-calculator-page-header,
#page-history .stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

#page-calculator .ai-calculator-page-header .header-small,
#page-history .stats-head .header-small {
    color: var(--team-primary) !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
}

#page-calculator .ai-calculator-page-header h1,
#page-history .stats-head h1 {
    margin: 4px 0 6px;
    font-size: 30px;
    line-height: 1.1;
    color: #ffffff;
}

#page-calculator .ai-calculator-page-header .page-subtitle,
#page-history .stats-head .page-subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.58);
}

/* Evita que los estilos antiguos de la calculadora alteren la nueva cabecera */
#page-calculator .ai-calculator-page-header {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Estadísticas: el botón de gestión conserva su función,
   pero queda alineado con el nuevo encabezado */
#page-history .stats-head {
    align-items: center;
}

#page-history .stats-head .stats-actions-row {
    margin: 0;
    flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    #page-calculator .ai-calculator-page-header,
    #page-history .stats-head {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    #page-calculator .ai-calculator-page-header h1,
    #page-history .stats-head h1 {
        font-size: 30px;
    }

    #page-calculator .ai-calculator-page-header .page-subtitle,
    #page-history .stats-head .page-subtitle {
        font-size: 13px;
    }

    #page-history .stats-head {
        flex-direction: column;
    }

    #page-history .stats-head .stats-actions-row {
        width: 100%;
    }

    #page-history .stats-head .stats-primary {
        width: 100%;
    }
}

@media (max-width: 480px) {

    #page-calculator .ai-calculator-page-header h1,
    #page-history .stats-head h1 {
        font-size: 28px;
    }
}


/* =========================================================
   V23 - CABECERA MIS ESTADÍSTICAS
   MISMO ESPACIADO VISUAL QUE MIS SETUPS
========================================================= */

/* Contenedor izquierdo de la cabecera */
#page-history .stats-head > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* PREMIUM PRO */
#page-history .stats-head .header-small {
    display: block;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}

/* Mis Estadísticas */
#page-history .stats-head h1 {
    display: block;
    margin: 4px 0 6px 0 !important;
    line-height: 1.1 !important;
}

/* Tu perfil competitivo... */
#page-history .stats-head .page-subtitle {
    display: block;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Mantener el mismo aire inferior que Mis Setups */
#page-history .stats-head {
    margin-bottom: 22px !important;
}

/* Móvil */
@media (max-width: 768px) {
    #page-history .stats-head > div:first-child {
        width: 100%;
    }

    #page-history .stats-head .header-small {
        margin-bottom: 4px !important;
    }

    #page-history .stats-head h1 {
        margin: 4px 0 6px 0 !important;
    }

    #page-history .stats-head .page-subtitle {
        margin: 0 !important;
    }
}


/* =========================================================
   MIS ESTADÍSTICAS - DESCARGA TELEMETRY CONNECTOR
========================================================= */

#page-history .telemetry-download-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(5,10,15,.42);
}

#page-history .telemetry-download-info {
    min-width: 0;
}

#page-history .telemetry-download-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .11em;
}

#page-history .telemetry-download-info strong {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
}

#page-history .telemetry-download-info small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 9px;
}

#page-history .telemetry-download-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 0;
    border-radius: 11px;
    background: var(--team-primary);
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .045em;
    transition: transform .18s ease, opacity .18s ease;
}

#page-history .telemetry-download-button:hover {
    transform: translateY(-1px);
}

#page-history .telemetry-download-button.is-disabled {
    opacity: .42;
    pointer-events: none;
    cursor: not-allowed;
}

#page-history .telemetry-install-guide {
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    overflow: hidden;
}

#page-history .telemetry-install-guide summary {
    padding: 12px 14px;
    color: rgba(255,255,255,.80);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .045em;
    cursor: pointer;
    list-style: none;
}

#page-history .telemetry-install-guide summary::-webkit-details-marker {
    display: none;
}

#page-history .telemetry-install-guide-content {
    padding: 0 16px 15px 34px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    line-height: 1.65;
}

#page-history .telemetry-install-guide-content ol {
    margin: 0;
    padding-left: 17px;
}

#page-history .telemetry-install-guide-content li + li {
    margin-top: 6px;
}


/* =========================================================
   ADMIN - TELEMETRY CONNECTOR
========================================================= */

#page-admin .admin-telemetry-connector-card {
    width: 100%;
    margin-top: 18px;
    padding: 22px;
    border: 1px solid color-mix(
        in srgb,
        var(--team-primary) 26%,
        rgba(255,255,255,.10)
    );
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 0% 0%,
            color-mix(in srgb, var(--team-primary) 8%, transparent),
            transparent 40%
        ),
        rgba(12,18,25,.82);
}

#page-admin .admin-telemetry-connector-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

#page-admin .admin-telemetry-connector-head h2 {
    margin-top: 5px;
    font-size: 22px;
}

#page-admin .admin-telemetry-connector-head p:not(.header-small) {
    max-width: 680px;
    margin-top: 8px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.55;
}

#page-admin .admin-telemetry-version-badge {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid color-mix(
        in srgb,
        var(--team-primary) 35%,
        rgba(255,255,255,.08)
    );
    border-radius: 999px;
    color: var(--team-primary);
    background: color-mix(
        in srgb,
        var(--team-primary) 7%,
        transparent
    );
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;
    white-space: nowrap;
}

#page-admin .admin-telemetry-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 22px;
}

#page-admin .admin-telemetry-field {
    display: block;
    min-width: 0;
}

#page-admin .admin-telemetry-field > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255,255,255,.48);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

#page-admin .admin-telemetry-field input[type="text"],
#page-admin .admin-telemetry-field input[type="file"],
#page-admin .admin-telemetry-field textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    outline: none;
    background: rgba(5,10,15,.58);
    color: #fff;
    font: inherit;
}

#page-admin .admin-telemetry-field input[type="text"] {
    height: 44px;
    padding: 0 13px;
}

#page-admin .admin-telemetry-field input[type="file"] {
    min-height: 44px;
    padding: 8px 10px;
    color: rgba(255,255,255,.68);
    font-size: 11px;
}

#page-admin .admin-telemetry-field textarea {
    min-height: 210px;
    padding: 13px;
    resize: vertical;
    line-height: 1.55;
}

#page-admin .admin-telemetry-field input:focus,
#page-admin .admin-telemetry-field textarea:focus {
    border-color: var(--team-primary);
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--team-primary) 12%,
        transparent
    );
}

#page-admin .admin-telemetry-field small {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.43);
    font-size: 9px;
    overflow-wrap: anywhere;
}

#page-admin .admin-telemetry-guide-field {
    grid-column: 1 / -1;
}

#page-admin .admin-telemetry-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

#page-admin .admin-telemetry-actions .stats-primary {
    min-width: 220px;
}

#page-admin .admin-telemetry-message {
    min-height: 20px;
    margin-top: 10px;
    color: rgba(255,255,255,.55);
    font-size: 11px;
}

#page-admin .admin-telemetry-message.success {
    color: #55d98a;
}

#page-admin .admin-telemetry-message.error {
    color: #ff7878;
}

@media (max-width: 700px) {

    #page-history .telemetry-download-panel {
        flex-direction: column;
        align-items: stretch;
    }

    #page-history .telemetry-download-button {
        width: 100%;
    }

    #page-history .telemetry-install-guide-content {
        padding-left: 28px;
    }

    #page-admin .admin-telemetry-connector-card {
        padding: 16px;
    }

    #page-admin .admin-telemetry-connector-head {
        flex-direction: column;
    }

    #page-admin .admin-telemetry-fields {
        grid-template-columns: 1fr;
    }

    #page-admin .admin-telemetry-guide-field {
        grid-column: auto;
    }

    #page-admin .admin-telemetry-actions {
        justify-content: stretch;
    }

    #page-admin .admin-telemetry-actions .stats-primary {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   TELEMETRY CONNECTOR - ACABADO VISUAL FINAL
   Usa automáticamente el color de la escudería seleccionada
========================================================= */

/* ---------- ADMIN: campos ---------- */
#page-admin .admin-telemetry-field input[type="text"],
#page-admin .admin-telemetry-field textarea,
#page-admin .admin-telemetry-field input[type="file"] {
    border-color: color-mix(in srgb, var(--team-primary) 18%, rgba(255,255,255,.10));
    background: linear-gradient(180deg, rgba(15,18,23,.96), rgba(8,11,15,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

#page-admin .admin-telemetry-field input[type="file"] {
    padding: 6px;
}

#page-admin .admin-telemetry-field input[type="file"]::file-selector-button {
    min-height: 32px;
    margin-right: 10px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 40%, rgba(255,255,255,.12));
    border-radius: 8px;
    background: color-mix(in srgb, var(--team-primary) 14%, #101319);
    color: #fff;
    font-weight: 850;
    cursor: pointer;
    transition: .18s ease;
}

#page-admin .admin-telemetry-field input[type="file"]::file-selector-button:hover {
    border-color: var(--team-primary);
    background: color-mix(in srgb, var(--team-primary) 25%, #101319);
}

/* ---------- ADMIN: botones ---------- */
#page-admin .admin-telemetry-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

#page-admin .admin-telemetry-save-button,
#page-admin .admin-telemetry-delete-button {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .055em;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

#page-admin .admin-telemetry-save-button {
    min-width: 230px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 72%, rgba(255,255,255,.10));
    background: linear-gradient(
        135deg,
        var(--team-primary),
        color-mix(in srgb, var(--team-primary) 75%, #080808)
    );
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--team-primary) 18%, transparent);
}

#page-admin .admin-telemetry-delete-button {
    border: 1px solid rgba(255,87,87,.35);
    background: rgba(255,87,87,.07);
    color: #ff8888;
}

#page-admin .admin-telemetry-save-button:hover,
#page-admin .admin-telemetry-delete-button:hover {
    transform: translateY(-1px);
}

#page-admin .admin-telemetry-save-button:hover {
    filter: brightness(1.08);
}

#page-admin .admin-telemetry-delete-button:hover {
    border-color: #ff5757;
    background: rgba(255,87,87,.12);
}

#page-admin .admin-telemetry-save-button:disabled,
#page-admin .admin-telemetry-delete-button:disabled {
    opacity: .50;
    cursor: wait;
    transform: none;
}

/* ---------- ESTADÍSTICAS: descarga y guía ---------- */
#page-history .telemetry-download-panel {
    border-color: color-mix(in srgb, var(--team-primary) 24%, rgba(255,255,255,.08));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--team-primary) 5%, rgba(7,11,16,.92)),
            rgba(7,11,16,.92)
        );
}

#page-history .telemetry-download-button,
#page-history .telemetry-pairing-primary {
    border: 1px solid color-mix(in srgb, var(--team-primary) 72%, rgba(255,255,255,.10));
    background: linear-gradient(
        135deg,
        var(--team-primary),
        color-mix(in srgb, var(--team-primary) 75%, #080808)
    );
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--team-primary) 16%, transparent);
}

#page-history .telemetry-download-button:hover,
#page-history .telemetry-pairing-primary:hover {
    filter: brightness(1.08);
}

#page-history .telemetry-install-guide {
    border-color: color-mix(in srgb, var(--team-primary) 18%, rgba(255,255,255,.075));
}

#page-history .telemetry-install-guide[open] {
    border-color: color-mix(in srgb, var(--team-primary) 38%, rgba(255,255,255,.10));
}

#page-history .telemetry-install-guide summary {
    transition: color .18s ease, background .18s ease;
}

#page-history .telemetry-install-guide summary:hover {
    color: #fff;
    background: color-mix(in srgb, var(--team-primary) 7%, transparent);
}

@media (max-width: 700px) {
    #page-admin .admin-telemetry-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #page-admin .admin-telemetry-save-button,
    #page-admin .admin-telemetry-delete-button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   ADMIN - TELEMETRY CONNECTOR
   CABECERA IGUAL A LOS DEMÁS MÓDULOS
========================================================= */

#page-admin .admin-telemetry-connector-card {
    margin-top: 0;
}

#page-admin .admin-telemetry-connector-head-compact {
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.065);
}

#page-admin .admin-telemetry-card-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--team-primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

#page-admin .admin-telemetry-connector-head-compact h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
}

@media (max-width: 700px) {
    #page-admin .admin-telemetry-connector-head-compact {
        align-items: flex-start;
    }
}


/* =========================================================
   CORRECCIONES DE RESULTADOS / TELEMETRÍA VERIFICADA
========================================================= */

.stats-locked-result-actions {
    align-items: center;
    flex-wrap: wrap;
}

.stats-verified-badge {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 42%, #292929);
    border-radius: 999px;
    background: color-mix(in srgb, var(--team-primary) 10%, #0b0b0b);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
}

.stats-correction-request-button {
    border-color: var(--team-primary) !important;
    color: #fff !important;
}

.stats-correction-pending {
    opacity: .72;
    cursor: default !important;
}

.stats-correction-request-card {
    max-width: 650px;
}

.stats-correction-request-card textarea,
.stats-admin-correction-modal-card textarea,
.stats-admin-correction-modal-card input,
.stats-admin-correction-modal-card select {
    width: 100%;
    background: #0b0b0b;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px 14px;
    color: #fff;
    outline: none;
}

.stats-correction-request-card textarea:focus,
.stats-admin-correction-modal-card textarea:focus,
.stats-admin-correction-modal-card input:focus,
.stats-admin-correction-modal-card select:focus {
    border-color: var(--team-primary);
}

.stats-correction-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
}

.stats-correction-admin-summary {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.stats-correction-admin-summary small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1.5px;
}

.stats-correction-admin-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--team-primary);
    font-size: 28px;
}

.stats-correction-admin-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.stats-correction-admin-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.stats-correction-admin-card.is-reviewed {
    opacity: .78;
}

.stats-correction-admin-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.stats-correction-admin-card-head h3 {
    margin-top: 8px;
}

.stats-correction-admin-card-head small,
.stats-correction-no-evidence {
    color: var(--muted);
}

.stats-correction-status {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #222;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.stats-correction-status.status-pending {
    border: 1px solid var(--team-primary);
}

.stats-correction-status.status-approved {
    border: 1px solid var(--success);
}

.stats-correction-status.status-rejected {
    border: 1px solid var(--danger);
}

.stats-correction-current-result,
.stats-correction-reason,
.stats-correction-admin-response {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid #242424;
    border-radius: 10px;
    background: #0b0b0b;
    line-height: 1.5;
}

.stats-correction-reason small,
.stats-correction-admin-response small {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1px;
}

.stats-correction-reason p,
.stats-correction-admin-response p {
    margin-top: 6px;
}

.stats-correction-admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.stats-admin-correction-modal-card {
    max-width: 760px;
}

.stats-admin-correction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stats-admin-correction-checks {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0b0b0b;
}

.stats-admin-correction-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.stats-admin-correction-checks input {
    accent-color: var(--team-primary);
}

@media (max-width: 700px) {
    .stats-admin-correction-grid {
        grid-template-columns: 1fr;
    }

    .stats-correction-admin-card-head,
    .stats-correction-admin-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-correction-admin-actions > button {
        width: 100%;
    }
}


/* =========================================================
   VERIFICACIÓN DE CARRERAS MANUALES
========================================================= */
.stats-manual-verify-button {
    white-space: nowrap;
}
.stats-manual-pending-badge,
.stats-manual-verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
}
.stats-manual-pending-badge {
    border: 1px solid rgba(255, 193, 7, .35);
    background: rgba(255, 193, 7, .08);
}
.stats-manual-verified-badge {
    border: 1px solid rgba(50, 213, 131, .35);
    background: rgba(50, 213, 131, .08);
}
.stats-verification-own-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
#manualVerificationRequestModal input[type="file"] {
    width: 100%;
    margin-top: 8px;
}


/* =========================================================
   ADMIN - VERIFICACIÓN DE CARRERAS / DISEÑO COMPACTO
========================================================= */
#adminSectionStatisticsVerifications .stats-correction-admin-summary {
    padding: 14px 18px;
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}

#adminSectionStatisticsVerifications .stats-correction-admin-summary strong {
    font-size: 26px;
    line-height: 1;
}

#adminSectionStatisticsVerifications .stats-correction-admin-list {
    gap: 12px;
}

.stats-verification-admin-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(20,20,20,.98), rgba(11,11,11,.98));
}

.stats-verification-admin-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--team-primary);
}

.stats-verification-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.stats-verification-driver {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.stats-verification-driver-copy {
    min-width: 0;
}

.stats-verification-driver-copy h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.1;
}

.stats-verification-driver-copy small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.stats-verification-request-date {
    flex: 0 0 auto;
    text-align: right;
}

.stats-verification-request-date small,
.stats-verification-race-title small,
.stats-verification-result-item small {
    display: block;
    color: #727272;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.stats-verification-request-date strong {
    display: block;
    margin-top: 4px;
    color: #b8b8b8;
    font-size: 11px;
    font-weight: 700;
}

.stats-verification-race-panel {
    display: grid;
    grid-template-columns: minmax(230px, 1.25fr) minmax(360px, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.stats-verification-race-title,
.stats-verification-result-grid {
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    background: rgba(5,5,5,.55);
}

.stats-verification-race-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px 15px;
}

.stats-verification-race-title strong {
    margin-top: 5px;
    font-size: 16px;
}

.stats-verification-race-title span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.stats-verification-result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.stats-verification-result-item {
    padding: 12px 14px;
    border-left: 1px solid rgba(255,255,255,.07);
}

.stats-verification-result-item:first-child {
    border-left: 0;
}

.stats-verification-result-item strong {
    display: block;
    margin-top: 5px;
    font-size: 17px;
    line-height: 1.1;
}

.stats-verification-note {
    margin-top: 12px;
    padding: 11px 14px;
}

.stats-verification-note p {
    font-size: 13px;
    line-height: 1.45;
}

.stats-verification-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.stats-verification-evidence-area {
    flex: 0 0 auto;
}

.stats-verification-evidence-button {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.045);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .4px;
    cursor: pointer;
    transition: .2s ease;
}

.stats-verification-evidence-button:hover {
    border-color: var(--team-primary);
    background: rgba(255,255,255,.075);
    transform: translateY(-1px);
}

.stats-verification-card-footer .stats-verification-own-warning {
    flex: 1;
    margin-top: 0;
    padding: 10px 13px;
    border-color: rgba(255,193,7,.22);
    background: rgba(255,193,7,.055);
    color: #c8c8c8;
    text-align: right;
}

.stats-verification-review-actions {
    margin-top: 0;
    justify-content: flex-end;
}

.stats-verification-review-actions > button {
    min-width: 120px;
}

.stats-verification-admin-response {
    flex: 1;
    margin-top: 0;
}

@media (max-width: 900px) {
    .stats-verification-race-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .stats-verification-card-top,
    .stats-verification-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-verification-request-date {
        text-align: left;
    }

    .stats-verification-result-grid {
        grid-template-columns: 1fr;
    }

    .stats-verification-result-item {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .stats-verification-result-item:first-child {
        border-top: 0;
    }

    .stats-verification-evidence-button,
    .stats-verification-review-actions,
    .stats-verification-review-actions > button {
        width: 100%;
    }

    .stats-verification-card-footer .stats-verification-own-warning {
        text-align: center;
    }
}


/* =========================================================
   ADMIN - VERIFICACIÓN DE CARRERAS / AJUSTE V3
   - Acciones visibles para otro Admin
   - Aviso de carrera propia perfectamente centrado
========================================================= */

#adminSectionStatisticsVerifications .stats-verification-card-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

#adminSectionStatisticsVerifications .stats-verification-evidence-area {
    display: flex;
    align-items: center;
    min-width: 0;
}

#adminSectionStatisticsVerifications .stats-verification-review-actions {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

#adminSectionStatisticsVerifications .stats-verification-review-actions button {
    min-width: 150px;
    min-height: 42px;
    margin: 0;
}

#adminSectionStatisticsVerifications .stats-verification-own-warning {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    border: 1px solid rgba(255, 193, 7, .34);
    background: rgba(255, 193, 7, .055);
    color: #d5d5d5;
    border-radius: 10px;
    line-height: 1.25;
}

#adminSectionStatisticsVerifications .stats-verification-own-warning-icon {
    flex: 0 0 auto;
    line-height: 1;
}

#adminSectionStatisticsVerifications .stats-verification-data-warning {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 193, 7, .25);
    border-radius: 10px;
    background: rgba(255, 193, 7, .045);
    color: #b9b9b9;
    font-size: 11px;
    line-height: 1.5;
}

#adminSectionStatisticsVerifications .stats-verification-approve-button {
    border-color: rgba(50, 213, 131, .45);
}

#adminSectionStatisticsVerifications .stats-verification-reject-button {
    border-color: rgba(255, 87, 87, .55);
}

@media (max-width: 760px) {
    #adminSectionStatisticsVerifications .stats-verification-card-footer {
        grid-template-columns: 1fr;
    }

    #adminSectionStatisticsVerifications .stats-verification-evidence-area,
    #adminSectionStatisticsVerifications .stats-verification-review-actions {
        width: 100%;
    }

    #adminSectionStatisticsVerifications .stats-verification-evidence-button,
    #adminSectionStatisticsVerifications .stats-verification-review-actions button {
        width: 100%;
    }

    #adminSectionStatisticsVerifications .stats-verification-review-actions {
        flex-direction: column;
    }
}

/* =========================================================
   ADMIN - BOTONES APROBAR / RECHAZAR VERIFICACIÓN
========================================================= */

#adminSectionStatisticsVerifications .stats-verification-review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

/* BASE DE LOS DOS BOTONES */
#adminSectionStatisticsVerifications .stats-verification-review-actions button {
    min-width: 145px;
    height: 42px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;

    cursor: pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

/* APROBAR */
#adminSectionStatisticsVerifications .stats-verification-approve-button {
    background: rgba(50, 213, 131, .08);
    border: 1px solid rgba(50, 213, 131, .55);
    color: #32d583;
}

#adminSectionStatisticsVerifications .stats-verification-approve-button:hover {
    background: #32d583;
    border-color: #32d583;
    color: #07120c;

    transform: translateY(-1px);

    box-shadow:
        0 6px 18px rgba(50, 213, 131, .18);
}

/* RECHAZAR */
#adminSectionStatisticsVerifications .stats-verification-reject-button {
    background: rgba(255, 87, 87, .07);
    border: 1px solid rgba(255, 87, 87, .5);
    color: #ff6b6b;
}

#adminSectionStatisticsVerifications .stats-verification-reject-button:hover {
    background: #ff5757;
    border-color: #ff5757;
    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 6px 18px rgba(255, 87, 87, .18);
}

/* EFECTO AL PRESIONAR */
#adminSectionStatisticsVerifications .stats-verification-review-actions button:active {
    transform: translateY(0) scale(.98);
}

/* MÓVIL */
@media (max-width: 700px) {

    #adminSectionStatisticsVerifications .stats-verification-review-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    #adminSectionStatisticsVerifications .stats-verification-review-actions button {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   ADMINISTRADOR MAESTRO
========================================================= */

.user-role-badge.master-admin {
    color: #ffd76a !important;
    border-color: rgba(255, 199, 59, .55) !important;
    background: linear-gradient(
        135deg,
        rgba(255, 193, 7, .14),
        rgba(255, 193, 7, .035)
    ) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 215, 106, .04);
}

.profile-role-badge.master-admin {
    color: #ffd76a;
    border-color: rgba(255, 199, 59, .5);
    background: rgba(255, 193, 7, .08);
}

.master-admin-management-banner {
    width: 100%;
    margin-bottom: 16px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 12px;
    background: linear-gradient(
        110deg,
        rgba(255, 193, 7, .09),
        rgba(17, 17, 17, .96)
    );
}

.master-admin-management-banner.readonly {
    border-color: rgba(255, 255, 255, .12);
    background: #101010;
}

.master-admin-management-icon {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
}

.master-admin-management-banner div {
    min-width: 0;
}

.master-admin-management-banner strong {
    display: block;
    color: #ffd76a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.master-admin-management-banner.readonly strong {
    color: #d0d0d0;
}

.master-admin-management-banner small {
    display: block;
    margin-top: 4px;
    color: #9a9a9a;
    font-size: 11px;
    line-height: 1.4;
}

.role-select:disabled,
.user-action-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .master-admin-management-banner {
        align-items: flex-start;
    }
}


/* =========================================================
   PRECIOS PREMIUM - SOLO ADMINISTRADOR MAESTRO
========================================================= */

.premium-price-master-notice {
    margin-bottom: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 193, 7, .35);
    border-radius: 12px;
    background: rgba(255, 193, 7, .07);
}

.premium-price-master-notice.readonly {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .025);
}

.premium-price-master-notice > span {
    font-size: 23px;
    line-height: 1;
}

.premium-price-master-notice strong {
    display: block;
    color: #ffd76a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.premium-price-master-notice.readonly strong {
    color: #d0d0d0;
}

.premium-price-master-notice small {
    display: block;
    margin-top: 4px;
    color: #969696;
    line-height: 1.4;
}

#adminSectionPremiumPrice .profile-input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#adminSavePremiumPricesButton:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}


/* =========================================================
   VERIFICACIÓN MANUAL - ADMIN REVISOR Y HORA
========================================================= */

.stats-verification-review-info {
    margin-top: 14px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
}

.stats-verification-review-info-item {
    min-width: 0;
}

.stats-verification-review-info-item small {
    display: block;
    margin-bottom: 5px;
    color: #7f7f7f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
}

.stats-verification-review-info-item strong {
    display: block;
    color: #ededed;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .stats-verification-review-info {
        grid-template-columns: 1fr;
        gap: 11px;
    }
}


/* =========================================================
   TELEMETRY CONNECTOR - DESVINCULAR DESDE LA WEB
========================================================= */

#page-history .telemetry-pairing-danger {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 88, 88, .32);
    border-radius: 11px;
    background: rgba(255, 88, 88, .07);
    color: #ff8585;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        opacity .18s ease;
}

#page-history .telemetry-pairing-danger:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 88, 88, .6);
    background: rgba(255, 88, 88, .13);
}

#page-history .telemetry-pairing-danger:disabled {
    cursor: wait;
    opacity: .55;
    transform: none;
}

@media (max-width: 620px) {
    #page-history .telemetry-pairing-danger {
        width: 100%;
    }
}


/* =========================================================
   ADMIN · CORRECCIONES DE RESULTADOS
   REDISEÑO
========================================================= */

#adminStatisticsCorrectionsList .stats-correction-admin-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

#adminStatisticsCorrectionsList .stats-correction-admin-card:hover {
    border-color: rgba(255, 145, 0, 0.22);
}

#adminStatisticsCorrectionsList .stats-correction-admin-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff8a00, transparent);
    opacity: 0.7;
}

#adminStatisticsCorrectionsList .stats-correction-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 145, 0, 0.55);
    border-radius: 999px;
    background: rgba(255, 145, 0, 0.08);
    color: #ff9d24;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.7px;
}

#adminStatisticsCorrectionsList h3 {
    margin: 10px 0 2px;
    color: #f5f5f5;
    font-size: 17px;
    font-weight: 850;
}

#adminStatisticsCorrectionsList h3 + small {
    color: #777;
    font-size: 11px;
}

#adminStatisticsCorrectionsList .stats-correction-current-result {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.24);
    color: #d8d8d8;
    font-size: 12px;
    line-height: 1.6;
}

#adminStatisticsCorrectionsList .stats-correction-reason {
    margin-top: 14px;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.20);
}

#adminStatisticsCorrectionsList .stats-correction-reason small {
    display: block;
    margin-bottom: 7px;
    color: #777;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

#adminStatisticsCorrectionsList .stats-correction-reason p {
    margin: 0;
    color: #e8e8e8;
    font-size: 13px;
    line-height: 1.5;
}

#adminStatisticsCorrectionsList .stats-correction-admin-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 17px;
}

#adminStatisticsCorrectionsList .stats-correction-admin-actions button {
    min-height: 39px;
    padding: 9px 15px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.35px;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

#adminStatisticsCorrectionsList .stats-correction-admin-actions button:hover {
    transform: translateY(-1px);
}

#adminStatisticsCorrectionsList .stats-secondary {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.035);
    color: #d8d8d8;
}

#adminStatisticsCorrectionsList .stats-secondary:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.075);
    color: #ffffff;
}

#adminStatisticsCorrectionsList .stats-primary {
    border: 1px solid rgba(255, 145, 0, 0.42);
    background: rgba(255, 145, 0, 0.09);
    color: #ff9b20;
}

#adminStatisticsCorrectionsList .stats-primary:hover {
    border-color: #ff8a00;
    background: #ff8a00;
    color: #080808;
    box-shadow: 0 5px 18px rgba(255, 138, 0, 0.18);
}

#adminStatisticsCorrectionsList .stats-danger {
    border: 1px solid rgba(255, 75, 75, 0.32);
    background: rgba(255, 75, 75, 0.055);
    color: #ff7777;
}

#adminStatisticsCorrectionsList .stats-danger:hover {
    border-color: #ff5555;
    background: #ff5555;
    color: #ffffff;
    box-shadow: 0 5px 18px rgba(255, 75, 75, 0.15);
}

#adminStatisticsCorrectionsList .stats-correction-admin-response {
    margin-top: 15px;
    padding: 14px 16px;
    border-left: 3px solid #ff8a00;
    border-radius: 8px;
    background: rgba(255, 138, 0, 0.045);
}

#adminStatisticsCorrectionsList .stats-correction-admin-response small {
    display: block;
    margin-bottom: 6px;
    color: #ff9820;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.9px;
}

#adminStatisticsCorrectionsList .stats-correction-admin-response p {
    margin: 0;
    color: #d5d5d5;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 650px) {
    #adminStatisticsCorrectionsList .stats-correction-admin-card {
        padding: 17px;
        border-radius: 13px;
    }

    #adminStatisticsCorrectionsList .stats-correction-admin-card::before {
        left: 17px;
        right: 17px;
    }

    #adminStatisticsCorrectionsList .stats-correction-admin-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #adminStatisticsCorrectionsList .stats-correction-admin-actions button {
        width: 100%;
    }
}


/* =========================================================
   ADMIN · ELIMINAR CARRERA DESDE CORRECCIÓN
========================================================= */

#adminStatisticsCorrectionsList .stats-delete-race {
    border: 1px solid rgba(225, 72, 72, 0.55);
    background: rgba(225, 72, 72, 0.10);
    color: #ff8d8d;
}

#adminStatisticsCorrectionsList .stats-delete-race:hover {
    border-color: #e54848;
    background: #e54848;
    color: #ffffff;
    box-shadow: 0 5px 18px rgba(229, 72, 72, 0.20);
}


/* =========================================================
   ADMIN · APROBACIÓN DE ELIMINACIONES
========================================================= */

.stats-deletion-master-notice {
    margin: 0 0 18px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 175, 45, .30);
    border-radius: 13px;
    background: rgba(255, 145, 0, .06);
}

.stats-deletion-master-notice.readonly {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.025);
}

.stats-deletion-master-notice > span {
    font-size: 22px;
}

.stats-deletion-master-notice strong {
    display: block;
    color: #ffad3d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .9px;
}

.stats-deletion-master-notice.readonly strong {
    color: #d1d1d1;
}

.stats-deletion-master-notice small {
    display: block;
    margin-top: 4px;
    color: #8d8d8d;
    line-height: 1.45;
}

.stats-deletion-admin-list {
    display: grid;
    gap: 14px;
}

.stats-deletion-admin-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.033),
            rgba(255,255,255,.012)
        );
}

.stats-deletion-admin-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,145,0,.95),
            transparent
        );
}

.stats-deletion-admin-card.status-approved::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(80,190,110,.95),
            transparent
        );
}

.stats-deletion-admin-card.status-rejected::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(230,75,75,.95),
            transparent
        );
}

.stats-deletion-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.stats-deletion-card-head h3 {
    margin: 9px 0 2px;
    color: #f2f2f2;
    font-size: 16px;
}

.stats-deletion-card-head small {
    color: #777;
    font-size: 10px;
}

.stats-deletion-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    border: 1px solid rgba(255,145,0,.45);
    border-radius: 999px;
    background: rgba(255,145,0,.075);
    color: #ff9d25;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .7px;
}

.status-approved .stats-deletion-status {
    border-color: rgba(80,190,110,.38);
    background: rgba(80,190,110,.07);
    color: #79d891;
}

.status-rejected .stats-deletion-status {
    border-color: rgba(230,75,75,.38);
    background: rgba(230,75,75,.07);
    color: #ff8181;
}

.stats-deletion-created {
    text-align: right;
}

.stats-deletion-created small,
.stats-deletion-result-grid small,
.stats-deletion-admin-meta small,
.stats-deletion-origin-note small,
.stats-deletion-master-review small {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
}

.stats-deletion-created strong {
    color: #c9c9c9;
    font-size: 11px;
}

.stats-deletion-result-grid {
    margin-top: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(0,0,0,.20);
}

.stats-deletion-result-grid > div {
    min-width: 0;
}

.stats-deletion-result-grid strong {
    color: #ededed;
    font-size: 12px;
}

.stats-deletion-admin-meta {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(160px, .55fr) minmax(0, 1.45fr);
    gap: 10px;
}

.stats-deletion-admin-meta > div,
.stats-deletion-origin-note,
.stats-deletion-master-review {
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(0,0,0,.16);
}

.stats-deletion-admin-meta strong {
    color: #e6e6e6;
    font-size: 12px;
}

.stats-deletion-admin-meta p,
.stats-deletion-origin-note p,
.stats-deletion-master-response p {
    margin: 0;
    color: #d7d7d7;
    font-size: 12px;
    line-height: 1.5;
}

.stats-deletion-origin-note {
    margin-top: 10px;
}

.stats-deletion-master-review {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stats-deletion-master-review strong {
    color: #ededed;
    font-size: 12px;
}

.stats-deletion-master-response {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.stats-deletion-master-actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.stats-deletion-master-actions button {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .35px;
    cursor: pointer;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.stats-deletion-master-actions button:hover {
    transform: translateY(-1px);
}

.stats-deletion-approve {
    border: 1px solid rgba(80,190,110,.40);
    background: rgba(80,190,110,.08);
    color: #79d891;
}

.stats-deletion-approve:hover {
    border-color: #4fbd6e;
    background: #4fbd6e;
    color: #07110a;
}

.stats-deletion-reject {
    border: 1px solid rgba(230,75,75,.38);
    background: rgba(230,75,75,.06);
    color: #ff8585;
}

.stats-deletion-reject:hover {
    border-color: #e54b4b;
    background: #e54b4b;
    color: #fff;
}

.stats-deletion-pending-readonly,
.stats-deletion-waiting-master {
    margin-top: 15px;
    padding: 12px 14px;
    border: 1px solid rgba(255,145,0,.20);
    border-radius: 10px;
    background: rgba(255,145,0,.045);
    color: #d9a35a;
    font-size: 11px;
    font-weight: 800;
}

.stats-deletion-waiting-master {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-deletion-waiting-master strong {
    display: block;
    color: #eeb362;
    font-size: 10px;
    letter-spacing: .6px;
}

.stats-deletion-waiting-master small {
    display: block;
    margin-top: 3px;
    color: #8b8b8b;
    font-weight: 600;
}

@media (max-width: 760px) {
    .stats-deletion-card-head {
        flex-direction: column;
    }

    .stats-deletion-created {
        text-align: left;
    }

    .stats-deletion-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-deletion-admin-meta,
    .stats-deletion-master-review {
        grid-template-columns: 1fr;
    }

    .stats-deletion-master-response {
        grid-column: auto;
    }

    .stats-deletion-master-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .stats-deletion-master-actions button {
        width: 100%;
    }
}


/* =========================================================
   CORRECCIONES · HASTA 2 IMÁGENES DE PRUEBA
========================================================= */

.stats-correction-evidence-buttons,
.stats-deletion-evidence-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.stats-correction-evidence-buttons .stats-secondary,
.stats-deletion-evidence-buttons .stats-secondary {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
}

#statisticsCorrectionRequestEvidence {
    width: 100%;
}

@media (max-width: 620px) {
    .stats-correction-evidence-buttons,
    .stats-deletion-evidence-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .stats-correction-evidence-buttons .stats-secondary,
    .stats-deletion-evidence-buttons .stats-secondary {
        width: 100%;
    }
}


/* =========================================================
   CHAT DE SOLICITUDES DE CORRECCIÓN
========================================================= */

.stats-correction-chat-card {
    width: min(760px, calc(100vw - 28px));
    max-height: min(82vh, 820px);
    display: flex;
    flex-direction: column;
}

.stats-correction-chat-close {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stats-correction-chat-messages {
    min-height: 260px;
    max-height: 430px;
    overflow-y: auto;
    margin-top: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(0,0,0,.23);
}

.stats-correction-chat-empty {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #777;
}

.stats-correction-chat-empty > span {
    margin-bottom: 8px;
    font-size: 28px;
}

.stats-correction-chat-empty strong {
    color: #cfcfcf;
    font-size: 13px;
}

.stats-correction-chat-empty small {
    max-width: 390px;
    margin-top: 5px;
    line-height: 1.45;
}

.stats-correction-chat-message {
    width: min(78%, 560px);
    padding: 11px 13px;
    align-self: flex-start;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px 12px 12px 4px;
    background: rgba(255,255,255,.035);
}

.stats-correction-chat-message.mine {
    align-self: flex-end;
    border-color: rgba(255,145,0,.20);
    border-radius: 12px 12px 4px 12px;
    background: rgba(255,145,0,.07);
}

.stats-correction-chat-message.admin-message:not(.mine) {
    border-color: rgba(92,154,255,.18);
    background: rgba(92,154,255,.055);
}

.stats-correction-chat-message-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.stats-correction-chat-message-head strong {
    display: block;
    color: #ededed;
    font-size: 11px;
    font-weight: 900;
}

.stats-correction-chat-message-head small {
    display: block;
    margin-top: 2px;
    color: #777;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}

.stats-correction-chat-message-head time {
    flex: 0 0 auto;
    color: #666;
    font-size: 9px;
}

.stats-correction-chat-message p {
    margin: 8px 0 0;
    color: #d8d8d8;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.stats-correction-chat-composer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.stats-correction-chat-composer textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    outline: none;
    background: rgba(0,0,0,.25);
    color: #eee;
    font: inherit;
    font-size: 12px;
}

.stats-correction-chat-composer textarea:focus {
    border-color: rgba(255,145,0,.42);
}

.stats-correction-chat-composer-bottom {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stats-correction-chat-readonly {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: #999;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.stats-correction-chat-button {
    border-color: rgba(92,154,255,.23) !important;
    background: rgba(92,154,255,.055) !important;
    color: #9fc2ff !important;
}

.stats-correction-chat-button:hover {
    border-color: rgba(92,154,255,.48) !important;
    background: rgba(92,154,255,.12) !important;
    color: #d4e4ff !important;
}

@media (max-width: 620px) {
    .stats-correction-chat-card {
        width: calc(100vw - 18px);
        max-height: 90vh;
    }

    .stats-correction-chat-messages {
        min-height: 230px;
        max-height: 48vh;
        padding: 10px;
    }

    .stats-correction-chat-message {
        width: 90%;
    }

    .stats-correction-chat-composer-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-correction-chat-composer-bottom .stats-primary {
        width: 100%;
    }
}


/* =========================================================
   VERIFICACIÓN MANUAL · HASTA 2 PRUEBAS
========================================================= */

#manualVerificationRequestModal .stats-optional-label {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: #8d8d8d;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .9px;
    vertical-align: middle;
}

.stats-verification-evidence-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.stats-verification-evidence-buttons .stats-verification-evidence-button {
    min-width: 130px;
}

@media (max-width: 560px) {
    .stats-verification-evidence-buttons {
        width: 100%;
    }

    .stats-verification-evidence-buttons .stats-verification-evidence-button {
        flex: 1 1 100%;
        width: 100%;
    }
}


/* =========================================================
   FIX V9.2 · MODAL DE VERIFICACIÓN MANUAL DINÁMICO
   Este modal vive directamente dentro de BODY.
========================================================= */

body > #manualVerificationRequestModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(7px);
}

body > #manualVerificationRequestModal.stats-modal.hidden {
    display: none !important;
}

body > #manualVerificationRequestModal .stats-modal-card {
    width: min(650px, 100%);
    max-height: 92vh;
    overflow: auto;

    padding: 21px;

    border: 1px solid var(--stats-accent-border, rgba(255, 145, 0, .45));
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0c1219,
            #080d12
        );

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, .70);
}

body > #manualVerificationRequestModal .stats-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

body > #manualVerificationRequestModal .stats-kicker {
    color: var(--stats-accent, #ff8a00);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

body > #manualVerificationRequestModal .page-subtitle {
    margin-top: 7px;
    color: var(--muted);
}

body > #manualVerificationRequestModal .stats-field label {
    display: block;
    margin-bottom: 7px;
    color: #777;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
}

body > #manualVerificationRequestModal textarea,
body > #manualVerificationRequestModal input[type="file"] {
    width: 100%;
}

body > #manualVerificationRequestModal textarea {
    min-height: 88px;
    padding: 12px 13px;
    resize: vertical;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;

    background: #080808;
    color: #fff;
}

body > #manualVerificationRequestModal input[type="file"] {
    min-height: 46px;
    padding: 9px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;

    background: rgba(255,255,255,.025);
    color: #ddd;
}

body > #manualVerificationRequestModal .stats-correction-help {
    display: block;
    margin-top: 7px;
    color: #888;
    font-size: 11px;
    line-height: 1.45;
}

body > #manualVerificationRequestModal .stats-form-status {
    min-height: 20px;
    margin-top: 12px;
    color: #ddd;
    font-size: 11px;
    font-weight: 700;
}

body > #manualVerificationRequestModal .stats-form-buttons {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

body > #manualVerificationRequestModal .stats-primary,
body > #manualVerificationRequestModal .stats-secondary {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
}

body > #manualVerificationRequestModal .stats-primary {
    border: 0;
    background: var(--stats-accent, #ff8a00);
    color: #080808;
}

body > #manualVerificationRequestModal .stats-secondary {
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: #fff;
}

@media (max-width: 560px) {
    body > #manualVerificationRequestModal.stats-modal {
        padding: 10px;
    }

    body > #manualVerificationRequestModal .stats-modal-card {
        padding: 16px;
        border-radius: 15px;
    }

    body > #manualVerificationRequestModal .stats-form-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    body > #manualVerificationRequestModal .stats-form-buttons button {
        width: 100%;
    }
}


/* =========================================================
   V9.3 · ADMIN / VERIFICACIONES PENDIENTES
========================================================= */

#navAdmin {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 21px;
    height: 21px;
    padding: 0 6px;

    border: 2px solid #0e0e0e;
    border-radius: 999px;

    background: #ff8a00;
    color: #080808;

    font-size: 10px;
    line-height: 1;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;

    box-shadow:
        0 4px 14px
        rgba(255,138,0,.30);
}

.admin-menu-pending-badge {
    margin-left: auto;
    flex: 0 0 auto;
}

.admin-module-card {
    position: relative;
}

.admin-card-pending-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    border-color: #111318;
}

.stats-verification-notification-focus {
    animation:
        statsVerificationNotificationFocus
        2.2s ease;
}

@keyframes statsVerificationNotificationFocus {

    0%,
    100% {
        border-color:
            rgba(255,255,255,.10);

        box-shadow:
            none;
    }

    20%,
    75% {
        border-color:
            rgba(255,138,0,.82);

        box-shadow:
            0 0 0 3px
            rgba(255,138,0,.10),
            0 12px 35px
            rgba(255,138,0,.12);
    }
}

@media (max-width: 700px) {

    .admin-card-pending-badge {
        top: 10px;
        right: 10px;
    }
}


/* =========================================================
   V9.4 · FIX MODAL SOLICITAR CORRECCIÓN AL FRENTE
========================================================= */

#statisticsCorrectionRequestModal.stats-modal {
    z-index: 20020 !important;
}

#statisticsCorrectionRequestModal .stats-modal-card {
    position: relative;
    z-index: 1;
}

/*
   Gestión queda por debajo.
*/
#statisticsManagementModal.stats-modal {
    z-index: 9999;
}


/* =========================================================
   V9.5 · CONTADORES ADMIN GLOBALES
========================================================= */

#navAdmin {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 21px;
    height: 21px;
    padding: 0 6px;

    border: 2px solid #0e0e0e;
    border-radius: 999px;

    background: #ff8a00;
    color: #080808;

    font-size: 10px;
    line-height: 1;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;

    box-shadow:
        0 4px 14px
        rgba(255,138,0,.30);
}

.admin-menu-pending-badge {
    margin-left: auto;
    flex: 0 0 auto;
}

.admin-module-card {
    position: relative;
}

.admin-card-pending-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    border-color: #111318;
}

@media (max-width: 700px) {
    .admin-card-pending-badge {
        top: 10px;
        right: 10px;
    }
}


/* =========================================================
   V9.6 · CHAT DE CORRECCIONES SIEMPRE AL FRENTE
   Funciona desde Mis Estadísticas y desde Admin.
========================================================= */

body > #statisticsCorrectionChatModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;

    z-index: 20040 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(8px);
}

body > #statisticsCorrectionChatModal.stats-modal.hidden {
    display: none !important;
}

body > #statisticsCorrectionChatModal .stats-modal-card {
    width: min(760px, calc(100vw - 28px));
    max-height: 90vh;

    overflow: auto;

    padding: 21px;

    border: 1px solid rgba(255, 145, 0, .30);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0c1219,
            #080d12
        );

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .72);
}

body > #statisticsCorrectionChatModal .stats-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 12px;
}

body > #statisticsCorrectionChatModal .stats-kicker {
    color: var(--stats-accent, #ff8a00);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

body > #statisticsCorrectionChatModal .page-subtitle {
    margin-top: 6px;
    color: #888;
}

body > #statisticsCorrectionChatModal .stats-secondary,
body > #statisticsCorrectionChatModal .stats-primary {
    cursor: pointer;
}

body > #statisticsCorrectionChatModal .stats-correction-chat-close {
    flex: 0 0 auto;
}

@media (max-width: 620px) {
    body > #statisticsCorrectionChatModal.stats-modal {
        padding: 9px;
    }

    body > #statisticsCorrectionChatModal .stats-modal-card {
        width: calc(100vw - 18px);
        max-height: 92vh;
        padding: 16px;
        border-radius: 15px;
    }
}


/* =========================================================
   V9.7 · MENSAJE NUEVO EN CHAT DE CORRECCIÓN
========================================================= */

#adminCorrectionCardBadge:not(.hidden) {
    box-shadow:
        0 0 0 3px rgba(255,138,0,.08),
        0 4px 16px rgba(255,138,0,.34);
}


/* =========================================================
   V9.8 · HISTORIAL DE NOTIFICACIONES
========================================================= */

.notification-item {
    position: relative;
}

.notification-item.read {
    opacity: .68;
    background: rgba(255,255,255,.018);
}

.notification-item.read:hover {
    opacity: .92;
}

.notification-read-mark,
.notification-new-mark {
    flex: 0 0 auto;
    align-self: flex-start;

    margin-left: 8px;
    padding: 3px 6px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .7px;
}

.notification-read-mark {
    border: 1px solid rgba(255,255,255,.10);
    color: #777;
    background: rgba(255,255,255,.025);
}

.notification-new-mark {
    border: 1px solid rgba(255,138,0,.34);
    color: #ff9a25;
    background: rgba(255,138,0,.07);
}

.notification-history-footer {
    padding: 10px 12px 12px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    background:
        rgba(0,0,0,.18);
}

.notification-clear-history {
    width: 100%;
    min-height: 36px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 9px;

    background:
        rgba(255,255,255,.025);

    color: #858585;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;

    cursor: pointer;
}

.notification-clear-history:hover {
    border-color:
        rgba(255,138,0,.32);

    color:
        #ff9d28;

    background:
        rgba(255,138,0,.05);
}


/* =========================================================
   V9.8.1 · BOTÓN LIMPIAR HISTORIAL SIEMPRE VISIBLE
========================================================= */

#notificationHistoryFooter.notification-history-footer {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 20;

    padding: 11px 12px 13px;

    border-top: 1px solid rgba(255, 138, 0, .16);

    background:
        linear-gradient(
            180deg,
            rgba(8, 11, 15, .96),
            rgba(5, 7, 10, .99)
        );

    backdrop-filter: blur(10px);
}

#notificationHistoryFooter.notification-history-footer.hidden {
    display: none !important;
}

#notificationHistoryFooter .notification-clear-history {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 40px;

    border: 1px solid rgba(255, 138, 0, .28);
    border-radius: 10px;

    background: rgba(255, 138, 0, .07);
    color: #ff9b22;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .9px;

    cursor: pointer;
}

#notificationHistoryFooter .notification-clear-history:hover:not(:disabled) {
    border-color: rgba(255, 138, 0, .55);
    background: rgba(255, 138, 0, .12);
}

#notificationHistoryFooter .notification-clear-history:disabled {
    opacity: .42;
    cursor: default;
    color: #8b8b8b;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.025);
}


/* =========================================================
   V9.8.2 · CORRECCIÓN ESTRUCTURAL DEL PANEL DE NOTIFICACIONES
   El scroll pertenece SOLO a la lista.
========================================================= */

.notification-panel {
    display: flex !important;
    flex-direction: column !important;

    width: min(390px, calc(100vw - 28px)) !important;
    max-height: min(620px, calc(100vh - 90px)) !important;

    overflow: hidden !important;
}

.notification-panel.hidden {
    display: none !important;
}

/* Cabecera fija dentro del panel */
.notification-panel-header {
    flex: 0 0 auto !important;
}

/* Solo esta zona puede desplazarse */
#notificationList.notification-list {
    flex: 1 1 auto !important;

    min-height: 0 !important;
    max-height: 430px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-gutter: stable;
}

/* El pie ya NO es sticky ni flota encima de la lista */
#notificationHistoryFooter.notification-history-footer {
    position: static !important;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 11px 14px 14px !important;

    border-top:
        1px solid
        rgba(255,255,255,.07) !important;

    background:
        #0b0d10 !important;

    backdrop-filter: none !important;
}

#notificationHistoryFooter.notification-history-footer.hidden {
    display: none !important;
}

#notificationHistoryFooter .notification-clear-history {
    width: 100% !important;
    min-height: 40px !important;

    margin: 0 !important;

    border:
        1px solid
        rgba(255,138,0,.40) !important;

    border-radius: 10px !important;

    background:
        rgba(255,138,0,.06) !important;

    color:
        #ff9b22 !important;
}

/* Scroll discreto solo en la lista */
#notificationList.notification-list::-webkit-scrollbar {
    width: 7px;
}

#notificationList.notification-list::-webkit-scrollbar-track {
    background: transparent;
}

#notificationList.notification-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.20);
}

@media (max-width: 600px) {
    .notification-panel {
        width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 76px) !important;
    }

    #notificationList.notification-list {
        max-height: calc(100vh - 205px) !important;
    }
}


/* =========================================================
   V9.8.4 · CORRECCIÓN ADMINISTRATIVA
   MODAL PROFESIONAL SIEMPRE AL FRENTE
========================================================= */

body > #adminStatisticsCorrectionModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;

    z-index: 20060 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 20px;

    overflow-y: auto;

    background:
        rgba(0, 0, 0, .88);

    backdrop-filter:
        blur(8px);
}

body > #adminStatisticsCorrectionModal.stats-modal.hidden {
    display: none !important;
}


/* TARJETA PRINCIPAL */
body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card {

    width:
        min(
            780px,
            calc(100vw - 30px)
        );

    max-width:
        780px !important;

    max-height:
        92vh;

    overflow-y:
        auto;

    margin:
        auto;

    padding:
        24px;

    border:
        1px solid
        rgba(255, 138, 0, .32);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #0d1218,
            #090d12
        );

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .78);
}


/* CABECERA */
body > #adminStatisticsCorrectionModal
.stats-modal-head {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        22px;

    padding-bottom:
        16px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


body > #adminStatisticsCorrectionModal
.stats-kicker {

    margin-bottom:
        6px;

    color:
        var(
            --team-primary,
            #ff8a00
        );

    font-size:
        10px;

    font-weight:
        1000;

    letter-spacing:
        1.4px;
}


body > #adminStatisticsCorrectionModal
.stats-modal-head h2 {

    margin:
        0;

    color:
        #f3f3f3;

    font-size:
        23px;

    line-height:
        1.15;
}


body > #adminStatisticsCorrectionModal
#adminStatisticsCorrectionSubtitle {

    display:
        block;

    margin-top:
        7px;

    color:
        #777;

    font-size:
        10px;

    overflow-wrap:
        anywhere;
}


/* GRID DE CAMPOS */
body > #adminStatisticsCorrectionModal
.stats-admin-correction-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px 16px;
}


body > #adminStatisticsCorrectionModal
.stats-field {

    min-width:
        0;
}


body > #adminStatisticsCorrectionModal
.stats-field label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #858585;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        .85px;
}


body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card input,
body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card select,
body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card textarea {

    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        10px;

    outline:
        none;

    background:
        #070a0e;

    color:
        #f1f1f1;

    font:
        inherit;

    font-size:
        12px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card input:focus,
body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card select:focus,
body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card textarea:focus {

    border-color:
        rgba(255,138,0,.58);

    background:
        #090d12;

    box-shadow:
        0 0 0 3px
        rgba(255,138,0,.07);
}


body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card textarea {

    min-height:
        105px;

    resize:
        vertical;

    line-height:
        1.5;
}


/* CHECKBOXES */
body > #adminStatisticsCorrectionModal
.stats-admin-correction-checks {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin:
        17px 0;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.022);
}


body > #adminStatisticsCorrectionModal
.stats-admin-correction-checks label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #d3d3d3;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}


body > #adminStatisticsCorrectionModal
.stats-admin-correction-checks input {

    width:
        15px !important;

    min-height:
        auto !important;

    height:
        15px;

    padding:
        0 !important;

    accent-color:
        var(
            --team-primary,
            #ff8a00
        );
}


/* MOTIVO */
body > #adminStatisticsCorrectionModal
#adminCorrectionReason {

    min-height:
        110px;

    margin-top:
        2px;
}


/* ESTADO */
body > #adminStatisticsCorrectionModal
#adminStatisticsCorrectionStatus {

    min-height:
        20px;

    margin-top:
        10px;

    color:
        #bdbdbd;

    font-size:
        10px;

    font-weight:
        700;
}


/* BOTONES */
body > #adminStatisticsCorrectionModal
.stats-form-buttons {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        18px;

    padding-top:
        16px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


body > #adminStatisticsCorrectionModal
.stats-form-buttons button {

    min-height:
        42px;

    padding:
        9px 16px;

    border-radius:
        10px;

    font-size:
        10px;

    font-weight:
        1000;

    letter-spacing:
        .35px;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


body > #adminStatisticsCorrectionModal
.stats-form-buttons button:hover {

    transform:
        translateY(-1px);
}


body > #adminStatisticsCorrectionModal
.stats-form-buttons .stats-secondary {

    border:
        1px solid
        rgba(255,255,255,.13);

    background:
        rgba(255,255,255,.035);

    color:
        #ddd;
}


body > #adminStatisticsCorrectionModal
.stats-form-buttons .stats-primary {

    border:
        1px solid
        rgba(255,138,0,.62);

    background:
        var(
            --team-primary,
            #ff8a00
        );

    color:
        #090909;

    box-shadow:
        0 7px 22px
        rgba(255,138,0,.16);
}


/* SCROLL DEL MODAL */
body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card::-webkit-scrollbar {

    width:
        7px;
}

body > #adminStatisticsCorrectionModal
.stats-admin-correction-modal-card::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        rgba(255,255,255,.16);
}


/* RESPONSIVE */
@media (max-width: 700px) {

    body > #adminStatisticsCorrectionModal.stats-modal {

        align-items:
            flex-start;

        padding:
            10px;
    }


    body > #adminStatisticsCorrectionModal
    .stats-admin-correction-modal-card {

        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);

        padding:
            17px;

        border-radius:
            15px;
    }


    body > #adminStatisticsCorrectionModal
    .stats-admin-correction-grid {

        grid-template-columns:
            1fr;
    }


    body > #adminStatisticsCorrectionModal
    .stats-admin-correction-checks {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            11px;
    }


    body > #adminStatisticsCorrectionModal
    .stats-form-buttons {

        display:
            grid;

        grid-template-columns:
            1fr;
    }


    body > #adminStatisticsCorrectionModal
    .stats-form-buttons button {

        width:
            100%;
    }
}


/* =========================================================
   V9.8.6 · REGISTRO VISUAL DE CORRECCIONES
========================================================= */

.stats-correction-audit-list {
    display: grid;
    gap: 10px;
    margin-top: 13px;
}

.stats-correction-audit {
    overflow: hidden;

    border:
        1px solid
        rgba(255, 138, 0, .18);

    border-left:
        3px solid
        #ff8a00;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 138, 0, .055),
            rgba(255, 255, 255, .012)
        );
}

.stats-correction-audit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding:
        13px 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .055);
}

.stats-correction-audit-head > div {
    display: grid;
    gap: 3px;
}

.stats-correction-audit-head small {
    color:
        #ff9718;

    font-size:
        8px;

    font-weight:
        1000;

    letter-spacing:
        1px;
}

.stats-correction-audit-head strong {
    color:
        #f2f2f2;

    font-size:
        11px;

    font-weight:
        900;
}

.stats-correction-audit-date {
    color:
        #777;

    font-size:
        9px;

    font-weight:
        700;

    text-align:
        right;
}

.stats-correction-audit-changes {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        8px;

    padding:
        12px 14px;
}

.stats-correction-audit-change {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        12px;

    min-height:
        47px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius:
        9px;

    background:
        rgba(0, 0, 0, .18);
}

.stats-correction-audit-label {
    color:
        #777;

    font-size:
        8px;

    font-weight:
        1000;

    letter-spacing:
        .6px;
}

.stats-correction-audit-values {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    gap:
        7px;

    white-space:
        nowrap;
}

.stats-correction-audit-before,
.stats-correction-audit-after {
    font-size:
        11px;

    font-weight:
        1000;
}

.stats-correction-audit-before {
    color:
        #9a9a9a;

    text-decoration:
        line-through;

    text-decoration-color:
        rgba(255, 94, 107, .48);
}

.stats-correction-audit-arrow {
    color:
        #ff8a00;

    font-size:
        13px;

    font-weight:
        1000;
}

.stats-correction-audit-after {
    color:
        #fff;
}

.stats-correction-audit-empty {
    padding:
        13px 14px;

    color:
        #777;

    font-size:
        10px;
}

.stats-correction-audit-meta {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        10px;

    padding:
        11px 14px 13px;

    border-top:
        1px solid
        rgba(255, 255, 255, .05);

    background:
        rgba(0, 0, 0, .10);
}

.stats-correction-audit-meta > div {
    display: grid;
    gap: 4px;
}

.stats-correction-audit-meta small {
    color:
        #686868;

    font-size:
        8px;

    font-weight:
        1000;

    letter-spacing:
        .7px;
}

.stats-correction-audit-meta strong {
    color:
        #cfcfcf;

    font-size:
        10px;

    font-weight:
        800;

    overflow-wrap:
        anywhere;
}

@media (max-width: 720px) {

    .stats-correction-audit-head {
        flex-direction:
            column;
    }

    .stats-correction-audit-date {
        text-align:
            left;
    }

    .stats-correction-audit-changes,
    .stats-correction-audit-meta {
        grid-template-columns:
            1fr;
    }

    .stats-correction-audit-change {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .stats-correction-audit-values {
        justify-content:
            flex-start;
    }
}


/* =========================================================
   V9.8.7 · HISTORIAL / AUDITORÍA · SOLO ADMIN MAESTRO
========================================================= */

.admin-master-audit-card {
    position: relative;
    border-color: rgba(255, 190, 60, .20);
    background:
        linear-gradient(
            145deg,
            rgba(255, 174, 0, .055),
            rgba(255, 255, 255, .018)
        );
}

.admin-master-audit-card:hover {
    border-color: rgba(255, 190, 60, .50);
}

.admin-master-only-chip {
    position: absolute;
    top: 11px;
    right: 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 22px;
    padding: 0 8px;

    border: 1px solid rgba(255, 190, 60, .28);
    border-radius: 999px;

    background: rgba(255, 174, 0, .08);
    color: #ffbd3d;

    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .8px;
}

.master-audit-lock-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 18px;
    padding: 14px 16px;

    border: 1px solid rgba(255, 185, 48, .20);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 174, 0, .06),
            rgba(255, 255, 255, .015)
        );
}

.master-audit-lock-banner > span {
    font-size: 22px;
}

.master-audit-lock-banner strong {
    color: #ffbd3d;
    font-size: 10px;
    letter-spacing: .9px;
}

.master-audit-lock-banner p {
    margin-top: 5px;
    color: #8e8e8e;
    font-size: 10px;
    line-height: 1.5;
}

.master-audit-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
    margin-top: 16px;
}

.master-audit-summary-card {
    min-height: 86px;
    padding: 15px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;

    background: rgba(255,255,255,.018);
}

.master-audit-summary-card small {
    display: block;

    color: #737373;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .8px;
}

.master-audit-summary-card strong {
    display: block;

    margin-top: 9px;

    color: #fff;
    font-size: 23px;
    font-weight: 1000;
}

.master-audit-filters {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 16px;
    padding: 14px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;

    background: rgba(255,255,255,.014);
}

.master-audit-filters > div {
    min-width: 0;
}

.master-audit-filters label {
    display: block;

    margin-bottom: 6px;

    color: #707070;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .7px;
}

.master-audit-filters select,
.master-audit-filters input {
    width: 100%;
    min-height: 40px;

    padding: 8px 10px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;

    outline: none;

    background: #090b0e;
    color: #ddd;

    font-size: 10px;
}

.master-audit-filters select:focus,
.master-audit-filters input:focus {
    border-color: rgba(255,138,0,.46);
}

.master-audit-search-wrap {
    grid-column: span 2;
}

.master-audit-clear-button,
.master-audit-refresh-button {
    align-self: end;
    min-height: 40px;
}

.master-audit-list {
    display: grid;
    gap: 12px;

    margin-top: 14px;
}

.master-audit-card {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(0,0,0,.08)
        );
}

.master-audit-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding: 14px 15px;

    border-bottom: 1px solid rgba(255,255,255,.055);
}

.master-audit-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.master-audit-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    border: 1px solid rgba(255,138,0,.18);
    border-radius: 10px;

    background: rgba(255,138,0,.05);
}

.master-audit-card-title small {
    display: block;

    color: #ff9618;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .8px;
}

.master-audit-card-title strong {
    display: block;

    margin-top: 3px;

    color: #f0f0f0;
    font-size: 12px;
}

.master-audit-card-head-right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}

.master-audit-card-head-right time {
    color: #727272;
    font-size: 8px;
}

.master-audit-status {
    display: inline-flex;
    align-items: center;

    min-height: 22px;
    padding: 0 8px;

    border: 1px solid rgba(255,138,0,.22);
    border-radius: 999px;

    background: rgba(255,138,0,.055);
    color: #ff9a22;

    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .7px;
}

.master-audit-meta-grid {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 8px;

    padding: 12px 15px;
}

.master-audit-meta-grid > div {
    min-width: 0;

    padding: 10px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;

    background: rgba(0,0,0,.12);
}

.master-audit-meta-grid small,
.master-audit-text-block small {
    display: block;

    color: #686868;
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .65px;
}

.master-audit-meta-grid strong {
    display: block;

    margin-top: 5px;

    color: #d8d8d8;
    font-size: 9px;
    font-weight: 900;

    overflow-wrap: anywhere;
}

.master-audit-text-block {
    margin: 0 15px 10px;
    padding: 11px 12px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;

    background: rgba(0,0,0,.12);
}

.master-audit-text-block.is-response {
    border-left: 3px solid rgba(255,138,0,.65);
}

.master-audit-text-block p {
    margin-top: 6px;

    color: #c4c4c4;
    font-size: 10px;
    line-height: 1.5;
}

.master-audit-result-summary {
    margin: 0 15px 15px;
    padding: 11px 12px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;

    background: #07090c;

    color: #ddd;
    font-size: 10px;
    font-weight: 800;
}

.master-audit-detail-block {
    padding: 0 15px 15px;
}

@media (max-width: 1050px) {

    .master-audit-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .master-audit-filters {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .master-audit-meta-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 620px) {

    .master-audit-summary-grid,
    .master-audit-filters,
    .master-audit-meta-grid {
        grid-template-columns:
            1fr;
    }

    .master-audit-search-wrap {
        grid-column:
            auto;
    }

    .master-audit-card-head {
        flex-direction:
            column;
    }

    .master-audit-card-head-right {
        align-items:
            flex-start;
    }
}


/* =========================================================
   V9.8.8 · SOLICITUD DE ELIMINACIÓN DEL USUARIO
========================================================= */

body > #statisticsDeletionRequestModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20070 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(0,0,0,.88);
    backdrop-filter: blur(8px);
}

body > #statisticsDeletionRequestModal.stats-modal.hidden {
    display: none !important;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card {
    width: min(650px, calc(100vw - 28px));
    max-height: 90vh;
    overflow-y: auto;

    padding: 22px;

    border: 1px solid rgba(255,87,87,.28);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #0d1218,
            #080c11
        );

    box-shadow:
        0 28px 85px
        rgba(0,0,0,.75);
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card textarea,
body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card input[type="file"] {
    width: 100%;
    margin-top: 7px;
    padding: 11px 12px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;

    background: #080b0f;
    color: #eee;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card textarea {
    min-height: 105px;
    resize: vertical;
}

.stats-form-help {
    display: block;
    margin-top: 7px;

    color: #7d7d7d;
    font-size: 9px;
    line-height: 1.45;
}

.stats-user-delete-request-button {
    border-color: rgba(255,87,87,.36) !important;
    color: #ff7f88 !important;
}

.stats-user-delete-request-button:hover {
    background: rgba(255,87,87,.09) !important;
    border-color: rgba(255,87,87,.60) !important;
}

.stats-deletion-user-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 12px;

    border: 1px solid rgba(255,175,53,.30);
    border-radius: 9px;

    background: rgba(255,175,53,.06);
    color: #ffad35;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .5px;
}

.stats-deletion-request-submit {
    min-height: 42px;
    padding: 9px 15px;

    border: 1px solid rgba(255,87,87,.40);
    border-radius: 10px;

    background: rgba(255,87,87,.08);
    color: #ff7f88;

    font-size: 10px;
    font-weight: 1000;
    cursor: pointer;
}

@media (max-width: 620px) {
    body > #statisticsDeletionRequestModal.stats-modal {
        align-items: flex-start;
        padding: 9px;
    }

    body > #statisticsDeletionRequestModal
    .stats-deletion-request-modal-card {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        padding: 16px;
    }
}


/* =========================================================
   V9.8.9 · MEJORA VISUAL MODAL SOLICITAR ELIMINACIÓN
========================================================= */

body > #statisticsDeletionRequestModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20080 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at center,
            rgba(40, 8, 12, .16),
            rgba(0, 0, 0, .90) 58%
        );

    backdrop-filter: blur(10px);
}

body > #statisticsDeletionRequestModal.stats-modal.hidden {
    display: none !important;
}


/* TARJETA */
body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card {

    width: min(660px, calc(100vw - 34px));
    max-height: 90vh;

    overflow-y: auto;

    padding: 24px;

    border:
        1px solid
        rgba(255, 87, 87, .30);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0c1218 0%,
            #090d12 55%,
            #0b0e12 100%
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,.78),
        0 0 0 1px rgba(255,255,255,.02) inset;
}


/* CABECERA */
body > #statisticsDeletionRequestModal
.stats-modal-head {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 22px;
    padding-bottom: 16px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

body > #statisticsDeletionRequestModal
.stats-modal-head > div:first-child {

    min-width: 0;
}

body > #statisticsDeletionRequestModal
.stats-kicker {

    margin: 0 0 6px;

    color: #ff6f78;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 1.2px;
}

body > #statisticsDeletionRequestModal
.stats-modal-head h2 {

    margin: 0;

    color: #fff;

    font-size: 24px;
    font-weight: 1000;

    line-height: 1.1;
}

body > #statisticsDeletionRequestModal
#statisticsDeletionRequestSubtitle {

    margin-top: 7px;

    color: #858585;

    font-size: 11px;
}


/* BOTÓN X */
body > #statisticsDeletionRequestModal
.stats-modal-head > .stats-secondary {

    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    color: #aaa;

    font-size: 14px;
    font-weight: 900;

    cursor: pointer;
}

body > #statisticsDeletionRequestModal
.stats-modal-head > .stats-secondary:hover {

    border-color:
        rgba(255,87,87,.42);

    background:
        rgba(255,87,87,.08);

    color:
        #ff7c84;
}


/* CAMPOS */
body > #statisticsDeletionRequestModal
.stats-field {

    margin-top: 16px;
}

body > #statisticsDeletionRequestModal
.stats-field label {

    display: block;

    margin-bottom: 7px;

    color: #9a9a9a;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: .8px;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card textarea {

    width: 100%;
    min-height: 120px;

    padding: 13px 14px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 11px;

    outline: none;

    resize: vertical;

    background:
        #070a0e;

    color:
        #f0f0f0;

    font-size: 12px;
    line-height: 1.55;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card textarea::placeholder {

    color:
        #5e5e5e;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card textarea:focus {

    border-color:
        rgba(255,87,87,.48);

    background:
        #090d12;

    box-shadow:
        0 0 0 3px
        rgba(255,87,87,.06);
}


/* INPUT ARCHIVOS */
body > #statisticsDeletionRequestModal
#statisticsDeletionRequestEvidence {

    width: 100%;

    min-height: 48px;

    padding: 8px 10px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 11px;

    background:
        #070a0e;

    color:
        #bdbdbd;

    font-size:
        10px;
}

body > #statisticsDeletionRequestModal
#statisticsDeletionRequestEvidence::file-selector-button {

    min-height: 32px;

    margin-right: 10px;
    padding: 0 12px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 8px;

    background:
        rgba(255,255,255,.05);

    color:
        #e3e3e3;

    font-size: 9px;
    font-weight: 900;

    cursor: pointer;
}

body > #statisticsDeletionRequestModal
#statisticsDeletionRequestEvidence::file-selector-button:hover {

    border-color:
        rgba(255,87,87,.40);

    background:
        rgba(255,87,87,.08);

    color:
        #ff858c;
}

body > #statisticsDeletionRequestModal
.stats-form-help {

    display: block;

    margin-top: 7px;

    color:
        #666;

    font-size:
        8px;

    line-height:
        1.45;
}


/* MENSAJE */
body > #statisticsDeletionRequestModal
#statisticsDeletionRequestStatus {

    min-height: 19px;

    margin-top: 12px;

    color:
        #c9c9c9;

    font-size:
        9px;

    font-weight:
        700;
}


/* ACCIONES */
body > #statisticsDeletionRequestModal
.stats-form-buttons {

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 18px;
    padding-top: 16px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


/* CANCELAR */
body > #statisticsDeletionRequestModal
.stats-form-buttons .stats-secondary {

    min-height: 42px;

    padding: 0 16px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    color:
        #d0d0d0;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        .5px;

    cursor:
        pointer;
}

body > #statisticsDeletionRequestModal
.stats-form-buttons .stats-secondary:hover {

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.18);

    color:
        #fff;
}


/* SOLICITAR ELIMINACIÓN */
body > #statisticsDeletionRequestModal
.stats-deletion-request-submit {

    min-height: 42px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(255,87,87,.46);

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            rgba(255,87,87,.15),
            rgba(255,87,87,.08)
        );

    color:
        #ff8189;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        .55px;

    cursor:
        pointer;

    box-shadow:
        0 8px 24px
        rgba(255,87,87,.08);

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-submit:hover:not(:disabled) {

    transform:
        translateY(-1px);

    border-color:
        rgba(255,87,87,.72);

    background:
        linear-gradient(
            180deg,
            rgba(255,87,87,.22),
            rgba(255,87,87,.12)
        );
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-submit:disabled {

    opacity:
        .45;

    cursor:
        wait;
}


/* SCROLL */
body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card::-webkit-scrollbar {

    width:
        7px;
}

body > #statisticsDeletionRequestModal
.stats-deletion-request-modal-card::-webkit-scrollbar-thumb {

    border-radius:
        999px;

    background:
        rgba(255,255,255,.15);
}


/* RESPONSIVE */
@media (max-width: 620px) {

    body > #statisticsDeletionRequestModal.stats-modal {

        align-items:
            flex-start;

        padding:
            10px;
    }

    body > #statisticsDeletionRequestModal
    .stats-deletion-request-modal-card {

        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);

        padding:
            17px;

        border-radius:
            15px;
    }

    body > #statisticsDeletionRequestModal
    .stats-form-buttons {

        display:
            grid;

        grid-template-columns:
            1fr;
    }

    body > #statisticsDeletionRequestModal
    .stats-form-buttons button {

        width:
            100%;
    }
}

/* V9.9 CHAT VERIFICACIÓN / ELIMINACIÓN */
body > #statisticsRequestChatModal.stats-modal{position:fixed!important;inset:0!important;z-index:20120!important;display:flex!important;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
body > #statisticsRequestChatModal.stats-modal.hidden{display:none!important}
body > #statisticsRequestChatModal .stats-request-chat-card{width:min(720px,calc(100vw - 28px));max-height:90vh;overflow:hidden;border:1px solid rgba(92,154,255,.24);border-radius:17px;background:linear-gradient(145deg,#0d1218,#080c11);box-shadow:0 30px 90px rgba(0,0,0,.78)}
.stats-request-chat-inline-button{flex:0 0 auto}
.stats-deletion-chat-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.stats-deletion-chat-button{border-color:rgba(92,154,255,.28)!important;background:rgba(92,154,255,.06)!important;color:#9fc2ff!important}
#adminSectionStatisticsVerifications .stats-verification-card-footer{flex-wrap:wrap}
@media(max-width:620px){body > #statisticsRequestChatModal.stats-modal{align-items:flex-start;padding:9px}body > #statisticsRequestChatModal .stats-request-chat-card{width:calc(100vw - 18px);max-height:calc(100vh - 18px)}.stats-request-chat-inline-button{width:100%}}


/* =========================================================
   V9.9.1 · REDISEÑO CHAT VERIFICACIÓN / ELIMINACIÓN
========================================================= */

/* BOTÓN CONVERSACIÓN EN TARJETAS ADMIN */
.stats-deletion-chat-actions {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 12px;
}

.stats-deletion-chat-actions .stats-correction-chat-button,
.stats-request-chat-inline-button {
    min-height: 38px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(92, 154, 255, .28) !important;

    border-radius:
        9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(92, 154, 255, .09),
            rgba(92, 154, 255, .045)
        ) !important;

    color:
        #a9c8ff !important;

    font-size:
        9px !important;

    font-weight:
        1000 !important;

    letter-spacing:
        .55px !important;

    text-transform:
        uppercase;

    cursor:
        pointer;

    box-shadow:
        0 5px 18px
        rgba(54, 112, 220, .08);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.stats-deletion-chat-actions .stats-correction-chat-button:hover,
.stats-request-chat-inline-button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(92, 154, 255, .58) !important;

    background:
        rgba(92, 154, 255, .14) !important;

    color:
        #e0ebff !important;

    box-shadow:
        0 8px 22px
        rgba(54, 112, 220, .12);
}


/* FONDO DEL MODAL */
body > #statisticsRequestChatModal.stats-modal {
    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        20120 !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        radial-gradient(
            circle at center,
            rgba(19, 33, 58, .18),
            rgba(0, 0, 0, .92) 58%
        );

    backdrop-filter:
        blur(10px);
}

body > #statisticsRequestChatModal.stats-modal.hidden {
    display:
        none !important;
}


/* TARJETA PRINCIPAL */
body > #statisticsRequestChatModal
.stats-request-chat-card {
    width:
        min(
            760px,
            calc(100vw - 36px)
        );

    max-height:
        min(
            88vh,
            760px
        );

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        0 !important;

    border:
        1px solid
        rgba(92, 154, 255, .30);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #0d131b 0%,
            #0a0f15 58%,
            #090d12 100%
        );

    box-shadow:
        0 34px 100px
        rgba(0, 0, 0, .82),
        0 0 0 1px
        rgba(255,255,255,.018)
        inset;
}


/* CABECERA */
body > #statisticsRequestChatModal
.stats-correction-chat-head {
    margin:
        0;

    padding:
        20px 22px 17px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    background:
        linear-gradient(
            180deg,
            rgba(92,154,255,.035),
            transparent
        );
}

body > #statisticsRequestChatModal
#statisticsRequestChatKicker {
    margin:
        0 0 6px;

    color:
        #7faeff;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        1.2px;
}

body > #statisticsRequestChatModal
#statisticsRequestChatTitle {
    margin:
        0;

    color:
        #fff;

    font-size:
        22px;

    font-weight:
        1000;

    line-height:
        1.08;
}

body > #statisticsRequestChatModal
#statisticsRequestChatMeta {
    margin-top:
        7px;

    color:
        #727b86;

    font-size:
        10px;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;
}


/* BOTÓN CERRAR */
body > #statisticsRequestChatModal
.stats-correction-chat-close {
    width:
        36px;

    height:
        36px;

    min-width:
        36px;

    padding:
        0 !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.035) !important;

    color:
        #9a9a9a !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;

    cursor:
        pointer;
}

body > #statisticsRequestChatModal
.stats-correction-chat-close:hover {
    border-color:
        rgba(92,154,255,.46) !important;

    background:
        rgba(92,154,255,.08) !important;

    color:
        #cfe0ff !important;
}


/* ÁREA DE MENSAJES */
body > #statisticsRequestChatModal
#statisticsRequestChatMessages {
    flex:
        1;

    min-height:
        300px;

    max-height:
        48vh;

    overflow-y:
        auto;

    padding:
        16px 18px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    background:
        #070b10;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(255,255,255,.16)
        transparent;
}

body > #statisticsRequestChatModal
#statisticsRequestChatMessages::-webkit-scrollbar {
    width:
        7px;
}

body > #statisticsRequestChatModal
#statisticsRequestChatMessages::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        rgba(255,255,255,.15);
}


/* ESTADO VACÍO */
body > #statisticsRequestChatModal
.stats-correction-chat-empty {
    min-height:
        270px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    text-align:
        center;

    padding:
        24px;
}

body > #statisticsRequestChatModal
.stats-correction-chat-empty > span {
    width:
        52px;

    height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        12px;

    border:
        1px solid
        rgba(92,154,255,.14);

    border-radius:
        14px;

    background:
        rgba(92,154,255,.045);

    font-size:
        22px;
}

body > #statisticsRequestChatModal
.stats-correction-chat-empty strong {
    color:
        #e8e8e8;

    font-size:
        13px;

    font-weight:
        900;
}

body > #statisticsRequestChatModal
.stats-correction-chat-empty small {
    max-width:
        390px;

    margin-top:
        7px;

    color:
        #727272;

    font-size:
        10px;

    line-height:
        1.5;
}


/* BURBUJAS DE MENSAJES */
body > #statisticsRequestChatModal
.stats-correction-chat-message {
    width:
        min(
            78%,
            540px
        );

    padding:
        11px 12px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.035);
}

body > #statisticsRequestChatModal
.stats-correction-chat-message.mine {
    align-self:
        flex-end;

    border-color:
        rgba(92,154,255,.22);

    background:
        rgba(92,154,255,.075);
}

body > #statisticsRequestChatModal
.stats-correction-chat-message:not(.mine) {
    align-self:
        flex-start;
}

body > #statisticsRequestChatModal
.stats-correction-chat-message.admin-message:not(.mine) {
    border-left:
        3px solid
        rgba(255,145,0,.70);
}

body > #statisticsRequestChatModal
.stats-correction-chat-message-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        7px;
}

body > #statisticsRequestChatModal
.stats-correction-chat-message-head > div {
    min-width:
        0;
}

body > #statisticsRequestChatModal
.stats-correction-chat-message-head strong {
    display:
        block;

    color:
        #f2f2f2;

    font-size:
        10px;

    font-weight:
        900;
}

body > #statisticsRequestChatModal
.stats-correction-chat-message-head small {
    display:
        block;

    margin-top:
        2px;

    color:
        #657083;

    font-size:
        7px;

    font-weight:
        1000;

    letter-spacing:
        .6px;
}

body > #statisticsRequestChatModal
.stats-correction-chat-message-head time {
    color:
        #5f646b;

    font-size:
        7px;

    white-space:
        nowrap;
}

body > #statisticsRequestChatModal
.stats-correction-chat-message p {
    margin:
        0;

    color:
        #d8d8d8;

    font-size:
        11px;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


/* COMPOSITOR */
body > #statisticsRequestChatModal
#statisticsRequestChatComposer {
    padding:
        14px 16px 16px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    background:
        #0a0f15;
}

body > #statisticsRequestChatModal
#statisticsRequestChatInput {
    width:
        100%;

    min-height:
        88px;

    padding:
        12px 13px;

    resize:
        vertical;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        11px;

    outline:
        none;

    background:
        #070b10;

    color:
        #eee;

    font-size:
        11px;

    line-height:
        1.5;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

body > #statisticsRequestChatModal
#statisticsRequestChatInput::placeholder {
    color:
        #555d66;
}

body > #statisticsRequestChatModal
#statisticsRequestChatInput:focus {
    border-color:
        rgba(92,154,255,.46);

    background:
        #080d13;

    box-shadow:
        0 0 0 3px
        rgba(92,154,255,.055);
}


/* FILA INFERIOR */
body > #statisticsRequestChatModal
.stats-correction-chat-composer-bottom {
    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}

body > #statisticsRequestChatModal
#statisticsRequestChatStatus {
    min-height:
        16px;

    color:
        #7e8792;

    font-size:
        9px;

    font-weight:
        700;
}

body > #statisticsRequestChatModal
#statisticsRequestChatSendButton {
    min-width:
        155px;

    min-height:
        40px;

    padding:
        0 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(92,154,255,.50);

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            rgba(92,154,255,.20),
            rgba(92,154,255,.11)
        );

    color:
        #dce9ff;

    font-size:
        9px;

    font-weight:
        1000;

    letter-spacing:
        .6px;

    cursor:
        pointer;

    box-shadow:
        0 8px 24px
        rgba(54,112,220,.10);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

body > #statisticsRequestChatModal
#statisticsRequestChatSendButton:hover:not(:disabled) {
    transform:
        translateY(-1px);

    border-color:
        rgba(92,154,255,.74);

    background:
        rgba(92,154,255,.23);

    box-shadow:
        0 10px 28px
        rgba(54,112,220,.15);
}

body > #statisticsRequestChatModal
#statisticsRequestChatSendButton:disabled {
    opacity:
        .45;

    cursor:
        wait;
}


/* SOLO LECTURA */
body > #statisticsRequestChatModal
#statisticsRequestChatReadOnly {
    margin:
        0;

    padding:
        13px 16px;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        0;

    background:
        rgba(255,255,255,.025);

    color:
        #7e8792;

    font-size:
        9px;

    font-weight:
        800;

    text-align:
        center;
}


/* RESPONSIVE */
@media (max-width: 620px) {

    body > #statisticsRequestChatModal.stats-modal {
        align-items:
            flex-start;

        padding:
            10px;
    }

    body > #statisticsRequestChatModal
    .stats-request-chat-card {
        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);

        border-radius:
            15px;
    }

    body > #statisticsRequestChatModal
    .stats-correction-chat-head {
        padding:
            16px;
    }

    body > #statisticsRequestChatModal
    #statisticsRequestChatTitle {
        font-size:
            19px;
    }

    body > #statisticsRequestChatModal
    #statisticsRequestChatMessages {
        min-height:
            250px;

        max-height:
            45vh;

        padding:
            12px;
    }

    body > #statisticsRequestChatModal
    .stats-correction-chat-message {
        width:
            90%;
    }

    body > #statisticsRequestChatModal
    .stats-correction-chat-composer-bottom {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    body > #statisticsRequestChatModal
    #statisticsRequestChatSendButton {
        width:
            100%;
    }

    .stats-deletion-chat-actions .stats-correction-chat-button,
    .stats-request-chat-inline-button {
        width:
            100%;
    }
}


/* =========================================================
   V9.9.2 · REDISEÑO CHAT DE CORRECCIÓN APROBADA
========================================================= */

/* MODAL GENERAL DE CORRECCIÓN */
body > #statisticsCorrectionChatModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;

    z-index: 20130 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at center,
            rgba(48, 28, 6, .18),
            rgba(0, 0, 0, .92) 58%
        );

    backdrop-filter: blur(10px);
}

body > #statisticsCorrectionChatModal.stats-modal.hidden {
    display: none !important;
}


/* TARJETA PRINCIPAL */
body > #statisticsCorrectionChatModal
.stats-correction-chat-card {
    width: min(760px, calc(100vw - 36px));
    max-height: min(88vh, 760px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 0 !important;

    border:
        1px solid
        rgba(255, 145, 0, .32);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0d1319 0%,
            #0a0f14 58%,
            #090d11 100%
        );

    box-shadow:
        0 34px 100px rgba(0,0,0,.82),
        0 0 0 1px rgba(255,255,255,.018) inset;
}


/* CABECERA */
body > #statisticsCorrectionChatModal
.stats-correction-chat-head {
    margin: 0;

    padding: 20px 22px 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    background:
        linear-gradient(
            180deg,
            rgba(255,145,0,.04),
            transparent
        );
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head .stats-kicker {
    margin: 0 0 6px;

    color: #ff980f;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 1.2px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head h2 {
    margin: 0;

    color: #fff;

    font-size: 22px;
    font-weight: 1000;

    line-height: 1.08;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head .page-subtitle {
    margin-top: 7px;

    color: #757575;

    font-size: 10px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* CERRAR */
body > #statisticsCorrectionChatModal
.stats-correction-chat-close {
    width: 36px;
    height: 36px;

    min-width: 36px;

    padding: 0 !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius: 10px !important;

    background:
        rgba(255,255,255,.035) !important;

    color: #999 !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    cursor: pointer;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-close:hover {
    border-color:
        rgba(255,145,0,.48) !important;

    background:
        rgba(255,145,0,.08) !important;

    color: #ffc36e !important;
}


/* MENSAJES */
body > #statisticsCorrectionChatModal
.stats-correction-chat-messages {
    flex: 1;

    min-height: 300px;
    max-height: 48vh;

    overflow-y: auto;

    padding: 16px 18px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    background: #070b0f;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255,255,255,.16)
        transparent;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-messages::-webkit-scrollbar {
    width: 7px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.15);
}


/* SIN MENSAJES */
body > #statisticsCorrectionChatModal
.stats-correction-chat-empty {
    min-height: 270px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    padding: 24px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty > span {
    width: 52px;
    height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border:
        1px solid
        rgba(255,145,0,.14);

    border-radius: 14px;

    background:
        rgba(255,145,0,.045);

    font-size: 22px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty strong {
    color: #ececec;

    font-size: 13px;
    font-weight: 900;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty small {
    max-width: 400px;

    margin-top: 7px;

    color: #747474;

    font-size: 10px;
    line-height: 1.5;
}


/* MENSAJES INDIVIDUALES */
body > #statisticsCorrectionChatModal
.stats-correction-chat-message {
    width: min(78%, 540px);

    padding: 11px 12px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 12px;

    background:
        rgba(255,255,255,.035);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message.mine {
    align-self: flex-end;

    border-color:
        rgba(255,145,0,.22);

    background:
        rgba(255,145,0,.07);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message:not(.mine) {
    align-self: flex-start;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message.admin-message:not(.mine) {
    border-left:
        3px solid
        rgba(255,145,0,.72);
}


/* SOLO LECTURA */
body > #statisticsCorrectionChatModal
.stats-correction-chat-readonly {
    margin: 12px 16px 16px;

    padding: 12px 14px;

    border:
        1px solid
        rgba(255,145,0,.16);

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(255,145,0,.045),
            rgba(255,145,0,.025)
        );

    color: #9a8a72;

    font-size: 9px;
    font-weight: 800;

    text-align: center;

    letter-spacing: .25px;
}


/* ESTADO APROBADO EN SUBTÍTULO */
body > #statisticsCorrectionChatModal
.page-subtitle {
    font-weight: 700;
}


/* RESPONSIVE */
@media (max-width: 620px) {

    body > #statisticsCorrectionChatModal.stats-modal {
        align-items: flex-start;
        padding: 10px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-card {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);

        border-radius: 15px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-head {
        padding: 16px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-head h2 {
        font-size: 19px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-messages {
        min-height: 250px;
        max-height: 45vh;

        padding: 12px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-message {
        width: 90%;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-readonly {
        margin: 10px 12px 12px;
    }
}


/* =========================================================
   V9.9.3 · CHAT CORRECCIÓN = MISMO ESTILO QUE ELIMINACIÓN
========================================================= */

body > #statisticsCorrectionChatModal.stats-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20130 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at center,
            rgba(19, 33, 58, .18),
            rgba(0, 0, 0, .92) 58%
        );

    backdrop-filter: blur(10px);
}

body > #statisticsCorrectionChatModal.stats-modal.hidden {
    display: none !important;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-card {
    width: min(760px, calc(100vw - 36px));
    max-height: min(88vh, 760px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 0 !important;

    border: 1px solid rgba(92,154,255,.30);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #0d131b 0%,
            #0a0f15 58%,
            #090d12 100%
        );

    box-shadow:
        0 34px 100px rgba(0,0,0,.82),
        0 0 0 1px rgba(255,255,255,.018) inset;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head {
    margin: 0;

    padding: 20px 22px 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    border-bottom: 1px solid rgba(255,255,255,.07);

    background:
        linear-gradient(
            180deg,
            rgba(92,154,255,.035),
            transparent
        );
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head .stats-kicker {
    margin: 0 0 6px;

    color: #7faeff;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: 1.2px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head h2 {
    margin: 0;

    color: #fff;

    font-size: 22px;
    font-weight: 1000;

    line-height: 1.08;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head .page-subtitle {
    margin-top: 7px;

    color: #727b86;

    font-size: 10px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-close {
    width: 36px;
    height: 36px;
    min-width: 36px;

    padding: 0 !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;

    background: rgba(255,255,255,.035) !important;
    color: #9a9a9a !important;

    font-size: 14px !important;
    font-weight: 900 !important;

    cursor: pointer;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-close:hover {
    border-color: rgba(92,154,255,.46) !important;
    background: rgba(92,154,255,.08) !important;
    color: #cfe0ff !important;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-messages {
    flex: 1;

    min-height: 300px;
    max-height: 48vh;

    overflow-y: auto;

    padding: 16px 18px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    background: #070b10;

    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-messages::-webkit-scrollbar {
    width: 7px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.15);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty {
    min-height: 270px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    padding: 24px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty > span {
    width: 52px;
    height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border: 1px solid rgba(92,154,255,.14);
    border-radius: 14px;

    background: rgba(92,154,255,.045);

    font-size: 22px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty strong {
    color: #e8e8e8;

    font-size: 13px;
    font-weight: 900;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-empty small {
    max-width: 390px;

    margin-top: 7px;

    color: #727272;

    font-size: 10px;
    line-height: 1.5;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message {
    width: min(78%, 540px);

    padding: 11px 12px;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;

    background: rgba(255,255,255,.035);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message.mine {
    align-self: flex-end;

    border-color: rgba(92,154,255,.22);
    background: rgba(92,154,255,.075);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message:not(.mine) {
    align-self: flex-start;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message.admin-message:not(.mine) {
    border-left: 3px solid rgba(255,145,0,.70);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 7px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message-head strong {
    display: block;

    color: #f2f2f2;

    font-size: 10px;
    font-weight: 900;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message-head small {
    display: block;

    margin-top: 2px;

    color: #657083;

    font-size: 7px;
    font-weight: 1000;

    letter-spacing: .6px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message-head time {
    color: #5f646b;

    font-size: 7px;

    white-space: nowrap;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-message p {
    margin: 0;

    color: #d8d8d8;

    font-size: 11px;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer {
    padding: 14px 16px 16px;

    border-top: 1px solid rgba(255,255,255,.07);

    background: #0a0f15;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer textarea {
    width: 100%;

    min-height: 88px;

    padding: 12px 13px;

    resize: vertical;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;

    outline: none;

    background: #070b10;
    color: #eee;

    font-size: 11px;
    line-height: 1.5;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer textarea:focus {
    border-color: rgba(92,154,255,.46);

    background: #080d13;

    box-shadow: 0 0 0 3px rgba(92,154,255,.055);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer-bottom {
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer-bottom .stats-primary {
    min-width: 155px;
    min-height: 40px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(92,154,255,.50);
    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(92,154,255,.20),
            rgba(92,154,255,.11)
        );

    color: #dce9ff;

    font-size: 9px;
    font-weight: 1000;

    letter-spacing: .6px;

    cursor: pointer;

    box-shadow: 0 8px 24px rgba(54,112,220,.10);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer-bottom .stats-primary:hover:not(:disabled) {
    transform: translateY(-1px);

    border-color: rgba(92,154,255,.74);

    background: rgba(92,154,255,.23);

    box-shadow: 0 10px 28px rgba(54,112,220,.15);
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-readonly {
    margin: 0;

    padding: 13px 16px;

    border-top: 1px solid rgba(255,255,255,.07);
    border-radius: 0;

    background: rgba(255,255,255,.025);

    color: #7e8792;

    font-size: 9px;
    font-weight: 800;

    text-align: center;
}

@media (max-width: 620px) {

    body > #statisticsCorrectionChatModal.stats-modal {
        align-items: flex-start;
        padding: 10px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-card {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);

        border-radius: 15px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-head {
        padding: 16px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-head h2 {
        font-size: 19px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-messages {
        min-height: 250px;
        max-height: 45vh;

        padding: 12px;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-message {
        width: 90%;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-composer-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    body > #statisticsCorrectionChatModal
    .stats-correction-chat-composer-bottom .stats-primary {
        width: 100%;
    }
}


/* =========================================================
   V9.9.5 · ADMIN CORRECCIONES · COLOR FIJO AZUL
   NO DEPENDE DE LA ESCUDERÍA SELECCIONADA
========================================================= */

#adminSectionStatisticsCorrections,
#adminStatisticsCorrectionsList {
    --correction-admin-blue: #496fff;
    --correction-admin-blue-soft: #89a7ff;
    --correction-admin-blue-border: rgba(73, 111, 255, .46);
    --correction-admin-blue-bg: rgba(73, 111, 255, .08);
}


/* CONTADOR PENDIENTES */
#adminSectionStatisticsCorrections
.stats-correction-admin-summary strong {
    color: var(--correction-admin-blue) !important;
}


/* TARJETAS */
#adminStatisticsCorrectionsList
.stats-correction-admin-card:hover {
    border-color:
        rgba(73, 111, 255, .32) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-admin-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(73, 111, 255, .95),
            transparent
        ) !important;

    opacity:
        .78 !important;
}


/* ESTADO GENERAL */
#adminStatisticsCorrectionsList
.stats-correction-status {
    border-color:
        var(--correction-admin-blue-border) !important;

    background:
        var(--correction-admin-blue-bg) !important;

    color:
        var(--correction-admin-blue-soft) !important;
}


/* APROBADA = VERDE */
#adminStatisticsCorrectionsList
.stats-correction-status.status-approved {
    border-color:
        rgba(50, 213, 131, .46) !important;

    background:
        rgba(50, 213, 131, .075) !important;

    color:
        #6ee7a8 !important;
}


/* RECHAZADA = ROJO */
#adminStatisticsCorrectionsList
.stats-correction-status.status-rejected {
    border-color:
        rgba(255, 87, 87, .42) !important;

    background:
        rgba(255, 87, 87, .07) !important;

    color:
        #ff8585 !important;
}


/* PENDIENTE = AZUL FIJO */
#adminStatisticsCorrectionsList
.stats-correction-status.status-pending {
    border-color:
        var(--correction-admin-blue-border) !important;

    background:
        var(--correction-admin-blue-bg) !important;

    color:
        var(--correction-admin-blue-soft) !important;
}


/* BOTÓN PRINCIPAL · AZUL FIJO */
#adminStatisticsCorrectionsList
.stats-primary {
    border:
        1px solid
        var(--correction-admin-blue-border) !important;

    background:
        var(--correction-admin-blue-bg) !important;

    color:
        #a9c0ff !important;

    box-shadow:
        0 5px 18px
        rgba(73, 111, 255, .08) !important;
}

#adminStatisticsCorrectionsList
.stats-primary:hover {
    border-color:
        rgba(73, 111, 255, .72) !important;

    background:
        rgba(73, 111, 255, .18) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 7px 22px
        rgba(73, 111, 255, .16) !important;
}


/* RESPUESTA ADMIN · AZUL FIJO */
#adminStatisticsCorrectionsList
.stats-correction-admin-response {
    border:
        1px solid
        rgba(73, 111, 255, .15) !important;

    border-left:
        3px solid
        rgba(73, 111, 255, .72) !important;

    background:
        linear-gradient(
            90deg,
            rgba(73, 111, 255, .055),
            rgba(73, 111, 255, .018)
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-admin-response small {
    color:
        #7899ff !important;
}


/* AUDITORÍA DE CAMBIOS · AZUL FIJO */
#adminStatisticsCorrectionsList
.stats-correction-audit {
    border-color:
        rgba(73, 111, 255, .16) !important;

    border-left-color:
        rgba(73, 111, 255, .72) !important;

    background:
        linear-gradient(
            135deg,
            rgba(73, 111, 255, .045),
            rgba(255,255,255,.010)
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-audit-head small,
#adminStatisticsCorrectionsList
.stats-correction-audit-arrow {
    color:
        #7899ff !important;
}


/* BOTÓN CONVERSACIÓN · AZUL FIJO */
#adminStatisticsCorrectionsList
.stats-correction-chat-button {
    border-color:
        rgba(73, 111, 255, .30) !important;

    background:
        rgba(73, 111, 255, .055) !important;

    color:
        #9db8ff !important;
}

#adminStatisticsCorrectionsList
.stats-correction-chat-button:hover {
    border-color:
        rgba(73, 111, 255, .60) !important;

    background:
        rgba(73, 111, 255, .12) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   V9.9.6 · ADMIN · COLOR SEGÚN ESCUDERÍA SELECCIONADA
   Correcciones · Eliminaciones · Historial/Auditoría
========================================================= */

/* CABECERA GENERAL DEL PANEL ADMIN */
#page-admin .admin-page-hero,
#page-admin .admin-section-header {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            #242424
        ) !important;

    background:
        linear-gradient(
            110deg,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                #101010
            ),
            #101010 62%,
            #0b0b0b
        ) !important;
}

#page-admin .admin-page-hero::before,
#page-admin .admin-section-header::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        ) !important;
}

#page-admin .admin-kicker,
#page-admin .admin-section-kicker,
#page-admin .admin-badge {
    color:
        var(--team-primary) !important;
}

#page-admin .admin-badge {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 56%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            #0b0b0b
        ) !important;
}


/* =========================================================
   CORRECCIONES DE RESULTADOS
========================================================= */

#adminSectionStatisticsCorrections
.stats-correction-admin-summary strong {
    color:
        var(--team-primary) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-admin-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 34%,
            #292929
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-admin-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-status.status-pending {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 52%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            #0b0b0b
        ) !important;

    color:
        var(--team-primary) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-chat-button,
#adminStatisticsCorrectionsList
.stats-primary {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            #0b0b0b
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 72%,
            white
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-chat-button:hover,
#adminStatisticsCorrectionsList
.stats-primary:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 72%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            #0b0b0b
        ) !important;

    color:
        #fff !important;
}

#adminStatisticsCorrectionsList
.stats-correction-admin-response {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #242424
        ) !important;

    border-left:
        3px solid
        var(--team-primary) !important;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 6%,
                #0b0b0b
            ),
            #0b0b0b
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-admin-response small {
    color:
        var(--team-primary) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-audit {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 20%,
            #292929
        ) !important;

    border-left-color:
        var(--team-primary) !important;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0b0b0b
            ),
            #0b0b0b
        ) !important;
}

#adminStatisticsCorrectionsList
.stats-correction-audit-head small,
#adminStatisticsCorrectionsList
.stats-correction-audit-arrow {
    color:
        var(--team-primary) !important;
}


/* =========================================================
   ELIMINACIONES DE CARRERAS
========================================================= */

#adminSectionStatisticsDeletions,
#adminStatisticsDeletionsList {
    --admin-module-accent:
        var(--team-primary);
}

#adminSectionStatisticsDeletions
.stats-deletion-master-notice {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            #0b0b0b
        ) !important;
}

#adminSectionStatisticsDeletions
.stats-deletion-master-notice strong {
    color:
        var(--team-primary) !important;
}

#adminSectionStatisticsDeletions
.stats-correction-admin-summary strong,
#adminSectionStatisticsDeletions
.stats-deletion-summary strong {
    color:
        var(--team-primary) !important;
}

#adminStatisticsDeletionsList
.stats-deletion-admin-card {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #292929
        ) !important;
}

#adminStatisticsDeletionsList
.stats-deletion-admin-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        ) !important;
}

#adminStatisticsDeletionsList
.stats-deletion-chat-button,
#adminStatisticsDeletionsList
.stats-secondary {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 34%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            #0b0b0b
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 72%,
            white
        ) !important;
}

#adminStatisticsDeletionsList
.stats-deletion-chat-button:hover,
#adminStatisticsDeletionsList
.stats-secondary:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 68%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 13%,
            #0b0b0b
        ) !important;

    color:
        #fff !important;
}


/* =========================================================
   HISTORIAL / AUDITORÍA DEL MAESTRO
========================================================= */

#adminSectionStatisticsAudit,
#adminStatisticsAuditList {
    --admin-audit-accent:
        var(--team-primary);
}

#adminSectionStatisticsAudit
.stats-audit-master-notice {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            #0b0b0b
        ) !important;
}

#adminSectionStatisticsAudit
.stats-audit-master-notice strong {
    color:
        var(--team-primary) !important;
}

#adminSectionStatisticsAudit
.stats-audit-summary strong {
    color:
        var(--team-primary) !important;
}

#adminSectionStatisticsAudit
select:focus,
#adminSectionStatisticsAudit
input:focus {
    border-color:
        var(--team-primary) !important;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            transparent
        ) !important;
}

#adminStatisticsAuditList
.stats-audit-card {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #292929
        ) !important;
}

#adminStatisticsAuditList
.stats-audit-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        ) !important;
}

#adminStatisticsAuditList
.stats-audit-type,
#adminStatisticsAuditList
.stats-audit-card .stats-kicker {
    color:
        var(--team-primary) !important;
}

#adminStatisticsAuditList
.stats-audit-admin-response {
    border-left-color:
        var(--team-primary) !important;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0b0b0b
            ),
            #0b0b0b
        ) !important;
}

#adminStatisticsAuditList
.stats-audit-admin-response small {
    color:
        var(--team-primary) !important;
}


/* ESTADOS SEMÁNTICOS SE MANTIENEN */
#adminStatisticsCorrectionsList
.stats-correction-status.status-approved,
#adminStatisticsDeletionsList
.status-approved,
#adminStatisticsAuditList
.status-approved {
    border-color:
        rgba(50, 213, 131, .46) !important;

    background:
        rgba(50, 213, 131, .075) !important;

    color:
        #6ee7a8 !important;
}

#adminStatisticsCorrectionsList
.stats-correction-status.status-rejected,
#adminStatisticsDeletionsList
.status-rejected,
#adminStatisticsAuditList
.status-rejected {
    border-color:
        rgba(255, 87, 87, .42) !important;

    background:
        rgba(255, 87, 87, .07) !important;

    color:
        #ff8585 !important;
}


/* =========================================================
   V9.9.7 · ELIMINACIÓN + CHAT · COLOR DE ESCUDERÍA
   El verde queda SOLO para la etiqueta ELIMINADA.
========================================================= */

/* TARJETA DE ELIMINACIÓN:
   no convertir toda la tarjeta a verde por estar aprobada/eliminada */
#adminStatisticsDeletionsList
.stats-deletion-admin-card,
#adminStatisticsDeletionsList
.stats-deletion-admin-card.status-approved,
#adminStatisticsDeletionsList
.stats-deletion-admin-card.status-rejected {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #292929
        ) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0d0d0d
            ),
            #0b0b0b 70%
        ) !important;
}

/* Línea superior siempre con la escudería */
#adminStatisticsDeletionsList
.stats-deletion-admin-card::before,
#adminStatisticsDeletionsList
.stats-deletion-admin-card.status-approved::before,
#adminStatisticsDeletionsList
.stats-deletion-admin-card.status-rejected::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        ) !important;
}

/* Mantener verde solamente la insignia ELIMINADA/APROBADA */
#adminStatisticsDeletionsList
.stats-deletion-status.status-approved,
#adminStatisticsDeletionsList
.status-approved > .stats-deletion-card-head
.stats-deletion-status {
    border-color:
        rgba(50, 213, 131, .46) !important;

    background:
        rgba(50, 213, 131, .075) !important;

    color:
        #6ee7a8 !important;
}


/* BOTÓN CONVERSACIÓN */
#adminStatisticsDeletionsList
.stats-deletion-chat-button,
#adminStatisticsDeletionsList
.stats-deletion-chat-actions
.stats-correction-chat-button,
.stats-request-chat-inline-button {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            #292929
        ) !important;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--team-primary) 11%,
                #0b0b0b
            ),
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0b0b0b
            )
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 72%,
            white
        ) !important;

    box-shadow:
        0 5px 18px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        ) !important;
}

#adminStatisticsDeletionsList
.stats-deletion-chat-button:hover,
#adminStatisticsDeletionsList
.stats-deletion-chat-actions
.stats-correction-chat-button:hover,
.stats-request-chat-inline-button:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 70%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 16%,
            #0b0b0b
        ) !important;

    color:
        #fff !important;
}


/* =========================================================
   CHAT COMPARTIDO VERIFICACIÓN / ELIMINACIÓN
   Sustituye el azul fijo por la escudería seleccionada.
========================================================= */

body > #statisticsRequestChatModal.stats-modal {
    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                transparent
            ),
            rgba(0,0,0,.92) 58%
        ) !important;
}

body > #statisticsRequestChatModal
.stats-request-chat-card {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            #292929
        ) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0d1218
            ),
            #080c11
        ) !important;

    box-shadow:
        0 34px 100px rgba(0,0,0,.82),
        0 0 0 1px
        color-mix(
            in srgb,
            var(--team-primary) 4%,
            transparent
        ) inset !important;
}

/* CABECERA */
body > #statisticsRequestChatModal
.stats-request-chat-head {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                transparent
            ),
            transparent
        ) !important;

    border-bottom-color:
        color-mix(
            in srgb,
            var(--team-primary) 15%,
            #202020
        ) !important;
}

body > #statisticsRequestChatModal
.stats-request-chat-head .stats-kicker,
body > #statisticsRequestChatModal
#statisticsRequestChatKicker {
    color:
        color-mix(
            in srgb,
            var(--team-primary) 76%,
            white
        ) !important;
}

/* MENSAJE PROPIO */
body > #statisticsRequestChatModal
.stats-request-chat-message.mine {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #101010
        ) !important;
}

/* MENSAJE ADMIN */
body > #statisticsRequestChatModal
.stats-request-chat-message.admin-message:not(.mine) {
    border-left-color:
        var(--team-primary) !important;
}

/* COMPOSER / TEXTAREA */
body > #statisticsRequestChatModal
.stats-request-chat-composer textarea:focus {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            #292929
        ) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            transparent
        ) !important;
}

/* BOTÓN ENVIAR */
body > #statisticsRequestChatModal
.stats-request-chat-composer .stats-primary,
body > #statisticsRequestChatModal
.stats-request-chat-composer-bottom .stats-primary {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            #292929
        ) !important;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--team-primary) 20%,
                #0b0b0b
            ),
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                #0b0b0b
            )
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 65%,
            white
        ) !important;
}

body > #statisticsRequestChatModal
.stats-request-chat-composer .stats-primary:hover:not(:disabled),
body > #statisticsRequestChatModal
.stats-request-chat-composer-bottom .stats-primary:hover:not(:disabled) {
    border-color:
        var(--team-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 24%,
            #0b0b0b
        ) !important;

    color:
        #fff !important;
}

/* AVISO SOLO LECTURA */
body > #statisticsRequestChatModal
.stats-request-chat-readonly {
    border-top-color:
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            #202020
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 3%,
            #101010
        ) !important;
}


/* =========================================================
   V9.9.8 · CHAT DE CORRECCIÓN · COLOR DE ESCUDERÍA
   Sustituye el azul fijo por el color dinámico seleccionado.
========================================================= */

/* FONDO DEL MODAL */
body > #statisticsCorrectionChatModal.stats-modal {
    background:
        radial-gradient(
            circle at center,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                transparent
            ),
            rgba(0,0,0,.92) 58%
        ) !important;
}


/* TARJETA PRINCIPAL */
body > #statisticsCorrectionChatModal
.stats-correction-chat-card {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            #292929
        ) !important;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0d131b
            ),
            #080c11
        ) !important;

    box-shadow:
        0 34px 100px rgba(0,0,0,.82),
        0 0 0 1px
        color-mix(
            in srgb,
            var(--team-primary) 4%,
            transparent
        ) inset !important;
}


/* CABECERA */
body > #statisticsCorrectionChatModal
.stats-correction-chat-head {
    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                transparent
            ),
            transparent
        ) !important;

    border-bottom-color:
        color-mix(
            in srgb,
            var(--team-primary) 15%,
            #202020
        ) !important;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-head .stats-kicker {
    color:
        color-mix(
            in srgb,
            var(--team-primary) 76%,
            white
        ) !important;
}


/* BOTÓN CERRAR */
body > #statisticsCorrectionChatModal
.stats-correction-chat-close:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #111111
        ) !important;

    color:
        #ffffff !important;
}


/* ESTADO VACÍO */
body > #statisticsCorrectionChatModal
.stats-correction-chat-empty > span {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            #0b0b0b
        ) !important;
}


/* MENSAJE PROPIO */
body > #statisticsCorrectionChatModal
.stats-correction-chat-message.mine {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            #292929
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #101010
        ) !important;
}


/* MENSAJE DE ADMIN */
body > #statisticsCorrectionChatModal
.stats-correction-chat-message.admin-message:not(.mine) {
    border-left-color:
        var(--team-primary) !important;
}


/* TEXTAREA */
body > #statisticsCorrectionChatModal
.stats-correction-chat-composer textarea:focus {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            #292929
        ) !important;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            transparent
        ) !important;
}


/* BOTÓN ENVIAR */
body > #statisticsCorrectionChatModal
.stats-correction-chat-composer-bottom .stats-primary {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            #292929
        ) !important;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--team-primary) 20%,
                #0b0b0b
            ),
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                #0b0b0b
            )
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 65%,
            white
        ) !important;

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            transparent
        ) !important;
}

body > #statisticsCorrectionChatModal
.stats-correction-chat-composer-bottom .stats-primary:hover:not(:disabled) {
    border-color:
        var(--team-primary) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 24%,
            #0b0b0b
        ) !important;

    color:
        #ffffff !important;
}


/* AVISO SOLO LECTURA */
body > #statisticsCorrectionChatModal
.stats-correction-chat-readonly {
    border-top-color:
        color-mix(
            in srgb,
            var(--team-primary) 14%,
            #202020
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 3%,
            #101010
        ) !important;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            #9a9a9a
        ) !important;
}


/* =========================================================
   V10.0 · ELIMINACIÓN DE USUARIOS · APROBACIÓN MAESTRA
========================================================= */

.user-deletion-master-notice {
    margin: 20px 0 16px;
    padding: 15px 17px;

    display: flex;
    align-items: center;
    gap: 12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #292929
        );

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            #0b0b0b
        );
}

.user-deletion-master-notice.readonly {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.025);
}

.user-deletion-master-notice > span {
    font-size: 22px;
}

.user-deletion-master-notice strong {
    display: block;

    color:
        var(--team-primary);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .8px;
}

.user-deletion-master-notice.readonly strong {
    color: #d0d0d0;
}

.user-deletion-master-notice small {
    display: block;
    margin-top: 4px;

    color: #858585;
    line-height: 1.45;
}


.user-deletion-summary {
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 14px 16px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;

    background: rgba(255,255,255,.02);
}

.user-deletion-summary small {
    display: block;

    color: #737373;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;
}

.user-deletion-summary strong {
    display: block;
    margin-top: 4px;

    color: var(--team-primary);

    font-size: 23px;
    font-weight: 1000;
}


.user-deletion-request-list {
    display: grid;
    gap: 14px;
}

.user-deletion-request-card {
    position: relative;
    overflow: hidden;

    padding: 20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 19%,
            #292929
        );

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 4%,
                #0d0d0d
            ),
            #0b0b0b
        );
}

.user-deletion-request-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        );
}

.user-deletion-request-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;
}

.user-deletion-kicker {
    color:
        color-mix(
            in srgb,
            var(--team-primary) 76%,
            white
        );

    font-size: 8px;
    font-weight: 1000;
    letter-spacing: 1px;
}

.user-deletion-request-head h3 {
    margin-top: 7px;

    color: #fff;

    font-size: 18px;
    font-weight: 1000;
}

.user-deletion-request-head p {
    margin-top: 4px;

    color: #777;

    font-size: 10px;
}

.user-deletion-status {
    min-height: 27px;
    padding: 5px 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .55px;
    white-space: nowrap;
}

.user-deletion-status.status-pending_master,
.user-deletion-status.status-processing {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 46%,
            #292929
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #0b0b0b
        );

    color:
        color-mix(
            in srgb,
            var(--team-primary) 76%,
            white
        );
}

.user-deletion-status.status-approved {
    border: 1px solid rgba(50,213,131,.42);
    background: rgba(50,213,131,.07);
    color: #6ee7a8;
}

.user-deletion-status.status-rejected {
    border: 1px solid rgba(255,87,87,.42);
    background: rgba(255,87,87,.07);
    color: #ff8585;
}


.user-deletion-meta-grid {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 9px;
}

.user-deletion-meta-grid > div {
    min-width: 0;

    padding: 10px 11px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 9px;

    background: rgba(255,255,255,.018);
}

.user-deletion-meta-grid small,
.user-deletion-reason small,
.user-deletion-master-response small {
    display: block;

    color: #686868;

    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .7px;
}

.user-deletion-meta-grid strong {
    display: block;
    margin-top: 4px;

    color: #d7d7d7;

    font-size: 9px;
    font-weight: 800;

    overflow-wrap: anywhere;
}


.user-deletion-reason,
.user-deletion-master-response {
    margin-top: 13px;

    padding: 12px 13px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 9px;

    background: rgba(255,255,255,.018);
}

.user-deletion-reason p,
.user-deletion-master-response p {
    margin-top: 6px;

    color: #c8c8c8;

    font-size: 10px;
    line-height: 1.5;
}

.user-deletion-master-response {
    border-left:
        3px solid
        var(--team-primary);

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--team-primary) 5%,
                #0b0b0b
            ),
            #0b0b0b
        );
}

.user-deletion-master-response strong {
    display: block;
    margin-top: 5px;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 74%,
            white
        );

    font-size: 9px;
}

.user-deletion-master-response time {
    display: block;
    margin-top: 8px;

    color: #616161;

    font-size: 8px;
}


.user-deletion-master-actions {
    margin-top: 15px;

    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.user-deletion-master-actions button {
    min-height: 40px;
    padding: 0 15px;

    border-radius: 9px;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: .45px;

    cursor: pointer;
}

.user-deletion-approve {
    border: 1px solid rgba(50,213,131,.42);
    background: rgba(50,213,131,.07);
    color: #6ee7a8;
}

.user-deletion-approve:hover {
    background: rgba(50,213,131,.15);
    border-color: rgba(50,213,131,.70);
    color: #fff;
}

.user-deletion-reject {
    border: 1px solid rgba(255,87,87,.42);
    background: rgba(255,87,87,.07);
    color: #ff8585;
}

.user-deletion-reject:hover {
    background: rgba(255,87,87,.15);
    border-color: rgba(255,87,87,.70);
    color: #fff;
}

.user-deletion-waiting {
    margin-top: 14px;
    padding: 11px 13px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            #292929
        );

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 5%,
            #0b0b0b
        );

    color:
        color-mix(
            in srgb,
            var(--team-primary) 58%,
            #b8b8b8
        );

    font-size: 9px;
    font-weight: 800;
}


/* El botón de la lista ahora SOLICITA, no elimina directamente */
.delete-user-button {
    border-color: rgba(255,87,87,.30);
}

.delete-user-button:not(:disabled)::after {
    content: "";
}


@media (max-width: 900px) {
    .user-deletion-meta-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}

@media (max-width: 620px) {
    .user-deletion-summary,
    .user-deletion-request-head {
        align-items: stretch;
        flex-direction: column;
    }

    .user-deletion-meta-grid {
        grid-template-columns: 1fr;
    }

    .user-deletion-master-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .user-deletion-master-actions button {
        width: 100%;
    }
}


/* =========================================================
   V10.1 · TRAZABILIDAD DE ACCESOS · ADMIN USUARIOS
========================================================= */

.user-access-audit {
    width: 100%;

    margin-top: 9px;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.user-access-audit-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    min-height: 20px;
}

.user-access-audit-item small {
    flex: 0 0 auto;

    color:
        color-mix(
            in srgb,
            var(--team-primary) 74%,
            #a8a8a8
        );

    font-size: 7px;
    font-weight: 1000;

    letter-spacing: .75px;
}

.user-access-audit-item span {
    color: #7f7f7f;

    font-size: 8px;
    font-weight: 700;

    line-height: 1.35;
}

.user-admin-row:hover
.user-access-audit-item span {
    color: #9a9a9a;
}

@media (max-width: 620px) {

    .user-access-audit {
        margin-top: 8px;
    }

    .user-access-audit-item {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }

    .user-access-audit-item span {
        font-size: 8px;
    }
}


/* =========================================================
   V10.1 · TEXTO TRAZABILIDAD DE ACCESOS MÁS GRANDE
========================================================= */

.user-access-audit-item small {
    font-size: 9px;
    font-weight: 1000;
}

.user-access-audit-item span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 620px) {

    .user-access-audit-item small {
        font-size: 8.5px;
    }

    .user-access-audit-item span {
        font-size: 9.5px;
    }
}


/* =========================================================
   V10.2 · HISTORIAL MAESTRO · CAMBIOS DE ACCESO
========================================================= */

.master-audit-access-change {
    margin-top: 12px;

    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        minmax(120px, 1fr)
        auto
        minmax(120px, 1fr);

    align-items: center;

    gap: 10px;

    padding: 13px 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 18%,
            #292929
        );

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 4%,
                #0b0b0b
            ),
            #0b0b0b
        );
}

.master-audit-access-change > div {
    min-width: 0;
}

.master-audit-access-change small {
    display: block;

    color: #686868;

    font-size: 7px;
    font-weight: 1000;

    letter-spacing: .8px;
}

.master-audit-access-change strong {
    display: block;

    margin-top: 5px;

    color: #d6d6d6;

    font-size: 10px;
    font-weight: 900;
}

.master-audit-access-change strong.is-enabled {
    color: #6ee7a8;
}

.master-audit-access-change strong.is-disabled {
    color: #ff8585;
}

.master-audit-access-arrow {
    color:
        var(--team-primary);

    font-size: 18px;
    font-weight: 1000;
}

@media (max-width: 720px) {

    .master-audit-access-change {
        grid-template-columns:
            1fr
            1fr;

        gap: 11px;
    }

    .master-audit-access-arrow {
        display: none;
    }
}


/* =========================================================
   V10.3 · ADMIN · ANUNCIOS GENERALES
========================================================= */

.announcement-admin-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(260px, .65fr);

    gap: 18px;

    margin-top: 24px;
}

.announcement-compose-panel,
.announcement-guide-panel,
.announcement-history-panel {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 16%,
            #292929
        );
}

.announcement-panel-heading,
.announcement-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;
}

.announcement-panel-heading h2,
.announcement-list-header h2,
.announcement-guide-panel h2 {
    margin:
        3px 0 0;
}

.announcement-approval-hint {
    flex: 0 0 auto;

    padding:
        7px 10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 36%,
            #313131
        );

    border-radius:
        999px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #111
        );

    color:
        var(--team-primary);

    font-size:
        8px;

    font-weight:
        1000;

    letter-spacing:
        .8px;
}

.announcement-approval-hint.master {
    border-color:
        rgba(74, 222, 128, .32);

    background:
        rgba(74, 222, 128, .07);

    color:
        #78e7a3;
}

.announcement-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        15px;
}

.announcement-field-full {
    grid-column:
        1 / -1;
}

#announcementTitle,
#announcementMessage,
#announcementExpiresAt,
#announcementSearch {
    width:
        100%;

    box-sizing:
        border-box;

    border:
        1px solid #2c2c2c;

    border-radius:
        8px;

    background:
        #0b0b0b;

    color:
        #e8e8e8;

    outline:
        none;
}

#announcementTitle,
#announcementExpiresAt,
#announcementSearch {
    min-height:
        42px;

    padding:
        0 12px;
}

#announcementMessage {
    min-height:
        140px;

    padding:
        12px;

    resize:
        vertical;

    font-family:
        inherit;

    line-height:
        1.5;
}

#announcementTitle:focus,
#announcementMessage:focus,
#announcementExpiresAt:focus,
#announcementSearch:focus {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 62%,
            #3a3a3a
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            transparent
        );
}

.announcement-char-counter,
.announcement-field-help {
    display:
        block;

    margin-top:
        6px;

    color:
        #676767;

    font-size:
        8px;

    font-weight:
        700;
}

.announcement-char-counter {
    text-align:
        right;
}

.announcement-create-actions {
    margin-top:
        18px;
}

.announcement-flow-list {
    display:
        flex;
    flex-direction:
        column;

    gap:
        12px;

    margin-top:
        18px;
}

.announcement-flow-list > div {
    display:
        flex;
    align-items:
        flex-start;

    gap:
        11px;

    padding:
        12px;

    border:
        1px solid #262626;

    border-radius:
        9px;

    background:
        #0b0b0b;
}

.announcement-flow-list > div > span {
    display:
        grid;
    place-items:
        center;

    width:
        25px;
    height:
        25px;

    flex:
        0 0 25px;

    border-radius:
        50%;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            #151515
        );

    color:
        var(--team-primary);

    font-size:
        9px;

    font-weight:
        1000;
}

.announcement-flow-list p {
    margin:
        0;

    color:
        #777;

    font-size:
        9px;

    line-height:
        1.5;
}

.announcement-flow-list strong {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #d6d6d6;

    font-size:
        10px;
}

.announcement-history-panel {
    margin-top:
        18px;
}

.announcement-summary-grid {
    display:
        grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        10px;

    margin:
        18px 0;
}

.announcement-summary-grid > div {
    padding:
        13px 14px;

    border:
        1px solid #272727;

    border-radius:
        9px;

    background:
        #0b0b0b;
}

.announcement-summary-grid small {
    display:
        block;

    color:
        #666;

    font-size:
        7px;

    font-weight:
        1000;

    letter-spacing:
        .8px;
}

.announcement-summary-grid strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #e5e5e5;

    font-size:
        18px;

    font-weight:
        1000;
}

.announcement-filter-bar {
    display:
        grid;
    grid-template-columns:
        minmax(180px, .45fr)
        minmax(240px, 1fr);

    gap:
        10px;

    margin-bottom:
        16px;
}

.admin-announcements-list {
    display:
        flex;
    flex-direction:
        column;

    gap:
        12px;
}

.admin-announcement-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        16px;

    border:
        1px solid #282828;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #0b0b0b
            ),
            #0a0a0a
        );
}

.admin-announcement-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;
    left:
        0;
    bottom:
        0;

    width:
        3px;

    background:
        #555;
}

.admin-announcement-card.status-published::before {
    background:
        #4ade80;
}

.admin-announcement-card.status-pending::before {
    background:
        #f0b429;
}

.admin-announcement-card.status-rejected::before {
    background:
        #ef6464;
}

.admin-announcement-card-top {
    display:
        flex;
    align-items:
        flex-start;
    justify-content:
        space-between;

    gap:
        12px;
}

.admin-announcement-type {
    display:
        flex;
    align-items:
        center;

    gap:
        10px;

    min-width:
        0;
}

.admin-announcement-type > span {
    display:
        grid;
    place-items:
        center;

    width:
        34px;
    height:
        34px;

    flex:
        0 0 34px;

    border:
        1px solid #292929;

    border-radius:
        9px;

    background:
        #101010;

    font-size:
        16px;
}

.admin-announcement-type small {
    display:
        block;

    color:
        var(--team-primary);

    font-size:
        7px;

    font-weight:
        1000;

    letter-spacing:
        .8px;
}

.admin-announcement-type strong {
    display:
        block;

    margin-top:
        3px;

    color:
        #e3e3e3;

    font-size:
        13px;

    font-weight:
        900;
}

.announcement-status-badge {
    flex:
        0 0 auto;

    padding:
        6px 9px;

    border:
        1px solid #333;

    border-radius:
        999px;

    color:
        #aaa;

    font-size:
        7px;

    font-weight:
        1000;

    letter-spacing:
        .7px;
}

.announcement-status-badge.published {
    border-color:
        rgba(74, 222, 128, .28);

    color:
        #72e49d;
}

.announcement-status-badge.pending {
    border-color:
        rgba(240, 180, 41, .30);

    color:
        #efc35b;
}

.announcement-status-badge.rejected {
    border-color:
        rgba(239, 100, 100, .30);

    color:
        #ef8585;
}

.admin-announcement-message {
    margin:
        14px 0;

    color:
        #9a9a9a;

    font-size:
        10px;

    line-height:
        1.6;

    white-space:
        pre-wrap;
}

.admin-announcement-meta {
    display:
        grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        8px;

    padding-top:
        12px;

    border-top:
        1px solid #202020;
}

.admin-announcement-meta > div {
    min-width:
        0;
}

.admin-announcement-meta small {
    display:
        block;

    color:
        #5f5f5f;

    font-size:
        6.5px;

    font-weight:
        1000;

    letter-spacing:
        .65px;
}

.admin-announcement-meta strong {
    display:
        block;

    overflow:
        hidden;

    margin-top:
        4px;

    color:
        #a9a9a9;

    font-size:
        8.5px;

    font-weight:
        800;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.announcement-rejection-box {
    margin-top:
        12px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(239, 100, 100, .20);

    border-radius:
        8px;

    background:
        rgba(239, 100, 100, .045);
}

.announcement-rejection-box small {
    color:
        #ef8585;

    font-size:
        7px;

    font-weight:
        1000;
}

.announcement-rejection-box p {
    margin:
        5px 0 0;

    color:
        #999;

    font-size:
        9px;

    line-height:
        1.45;
}

.announcement-review-actions {
    display:
        flex;
    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        14px;
}

@media (max-width: 900px) {

    .announcement-admin-grid {
        grid-template-columns:
            1fr;
    }
}

@media (max-width: 680px) {

    .announcement-form-grid,
    .announcement-filter-bar,
    .announcement-summary-grid,
    .admin-announcement-meta {
        grid-template-columns:
            1fr;
    }

    .announcement-panel-heading,
    .announcement-list-header,
    .admin-announcement-card-top {
        flex-direction:
            column;
    }

    .announcement-approval-hint,
    .announcement-status-badge {
        align-self:
            flex-start;
    }

    .announcement-review-actions {
        flex-direction:
            column;
    }

    .announcement-review-actions button {
        width:
            100%;
    }
}


/* =========================================================
   V10.3.1 · MODAL DE ANUNCIO GENERAL
========================================================= */

body.general-announcement-modal-open {
    overflow: hidden;
}

.general-announcement-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, .78);

    backdrop-filter:
        blur(7px);
    -webkit-backdrop-filter:
        blur(7px);
}

.general-announcement-modal-card {
    position: relative;

    width: min(560px, 100%);
    max-height: min(720px, calc(100vh - 40px));

    overflow-y: auto;

    padding: 28px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            #303030
        );

    border-radius: 18px;

    background:
        radial-gradient(
            circle at top left,
            color-mix(
                in srgb,
                var(--team-primary) 10%,
                #111
            ) 0%,
            #111 38%,
            #0b0b0b 100%
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .72),
        0 0 40px
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            transparent
        );

    animation:
        generalAnnouncementModalIn
        .18s ease-out;
}

@keyframes generalAnnouncementModalIn {

    from {
        opacity: 0;
        transform:
            translateY(12px)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

.general-announcement-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border:
        1px solid #333;

    border-radius: 50%;

    background:
        #0b0b0b;

    color:
        #aaa;

    cursor: pointer;

    transition: .2s;
}

.general-announcement-modal-close:hover {
    border-color:
        var(--team-primary);

    color:
        #fff;

    transform:
        rotate(3deg);
}

.general-announcement-modal-head {
    display: flex;
    align-items: center;

    gap: 14px;

    padding-right: 42px;
}

.general-announcement-modal-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 38%,
            #333
        );

    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 10%,
            #101010
        );

    font-size: 24px;
}

.general-announcement-modal-type {
    display: block;

    margin-bottom: 5px;

    color:
        var(--team-primary);

    font-size: 9px;

    font-weight: 1000;

    letter-spacing: 1.4px;
}

.general-announcement-modal-head h2 {
    margin: 0;

    color: #fff;

    font-size: 22px;

    line-height: 1.2;
}

.general-announcement-modal-message {
    margin-top: 22px;

    padding: 18px;

    border:
        1px solid #252525;

    border-radius: 12px;

    background:
        rgba(5, 5, 5, .62);

    color: #c9c9c9;

    font-size: 14px;

    line-height: 1.7;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.general-announcement-modal-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-top: 20px;

    padding-top: 16px;

    border-top:
        1px solid #252525;
}

.general-announcement-modal-footer > div {
    min-width: 0;
}

.general-announcement-modal-footer small {
    display: block;

    color: #666;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}

.general-announcement-modal-footer strong {
    display: block;

    margin-top: 5px;

    color: #aaa;

    font-size: 11px;

    font-weight: 800;
}

.general-announcement-modal-button {
    width: auto;
    min-width: 125px;

    padding:
        0 22px;
}

@media (max-width: 600px) {

    .general-announcement-modal {
        align-items: flex-end;

        padding:
            12px;
    }

    .general-announcement-modal-card {
        width: 100%;

        max-height:
            calc(100vh - 24px);

        padding:
            22px 18px 18px;

        border-radius:
            18px;
    }

    .general-announcement-modal-head {
        align-items:
            flex-start;

        padding-right:
            34px;
    }

    .general-announcement-modal-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 21px;
    }

    .general-announcement-modal-head h2 {
        font-size: 19px;
    }

    .general-announcement-modal-message {
        padding: 15px;

        font-size: 13px;
    }

    .general-announcement-modal-footer {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .general-announcement-modal-button {
        width: 100%;
    }
}


/* =========================================================
   V10.4 · AMIGOS + PERFIL DE PILOTO
========================================================= */

.friends-nav-item {
    position: relative;
}

.friends-menu-badge {
    position: absolute;

    top: 8px;
    right: 8px;

    display: grid;
    place-items: center;

    min-width: 19px;
    height: 19px;

    padding: 0 5px;

    border:
        2px solid #0e0e0e;

    border-radius: 999px;

    background:
        var(--team-primary);

    color: #fff;

    font-size: 9px;
    font-weight: 1000;

    line-height: 1;
}

.friends-page-header {
    margin-bottom: 24px;
}

.friends-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 18px;
}

.friends-summary-card {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 86px;

    padding: 16px;

    border:
        1px solid #292929;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #111
            ),
            #0e0e0e
        );

    color: #fff;

    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.friends-summary-card:hover,
.friends-summary-card.active {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            #333
        );

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #101010
        );

    transform:
        translateY(-2px);
}

.friends-summary-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            #333
        );

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            #111
        );

    font-size: 20px;
}

.friends-summary-card strong {
    display: block;

    color: #fff;

    font-size: 22px;
    font-weight: 1000;
}

.friends-summary-card small {
    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .5px;
}

.friends-panel {
    margin-top: 16px;

    padding: 20px;

    border:
        1px solid #292929;

    border-radius: 15px;

    background:
        #101010;
}

.friends-search-panel {
    margin-top: 0;
}

.friends-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 15px;
}

.friends-section-heading small {
    display: block;

    color:
        var(--team-primary);

    font-size: 8px;
    font-weight: 1000;

    letter-spacing: 1.2px;
}

.friends-section-heading h2 {
    margin: 4px 0 0;

    color: #fff;

    font-size: 18px;
}

.friends-search-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 10px;
}

.friends-search-input {
    width: 100%;
    min-height: 46px;

    padding: 0 14px;

    border:
        1px solid #2b2b2b;

    border-radius: 10px;

    background: #090909;

    color: #fff;

    outline: none;

    font-size: 13px;
}

.friends-search-input:focus {
    border-color:
        var(--team-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            transparent
        );
}

.friends-primary-button,
.friends-secondary-button,
.friends-danger-button,
.friends-refresh-button,
.friends-back-button {
    border-radius: 9px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .5px;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.friends-primary-button {
    min-height: 44px;

    padding: 0 18px;

    border:
        1px solid
        var(--team-primary);

    background:
        var(--team-primary);

    color: #fff;
}

.friends-primary-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 8px 24px
        color-mix(
            in srgb,
            var(--team-primary) 22%,
            transparent
        );
}

.friends-secondary-button,
.friends-refresh-button,
.friends-back-button {
    min-height: 40px;

    padding: 0 14px;

    border:
        1px solid #333;

    background: #0b0b0b;

    color: #aaa;
}

.friends-secondary-button:hover,
.friends-refresh-button:hover,
.friends-back-button:hover {
    border-color:
        var(--team-primary);

    color: #fff;
}

.friends-danger-button {
    min-height: 40px;

    padding: 0 14px;

    border:
        1px solid rgba(255, 87, 87, .30);

    background:
        rgba(255, 87, 87, .05);

    color: #ff8686;
}

.friends-danger-button:hover {
    border-color:
        rgba(255, 87, 87, .60);

    background:
        rgba(255, 87, 87, .10);
}

.friends-primary-button.compact,
.friends-secondary-button.compact,
.friends-danger-button.compact {
    min-height: 36px;

    padding:
        0 12px;

    font-size: 9px;
}

.friends-status-message {
    min-height: 18px;

    margin-top: 8px;

    color: #777;

    font-size: 10px;
}

.friends-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.friends-search-results {
    margin-top: 8px;
}

.friend-card {
    display: grid;
    grid-template-columns:
        minmax(240px, 1.3fr)
        minmax(140px, .55fr)
        minmax(190px, auto);

    align-items: center;

    gap: 14px;

    padding: 13px 14px;

    border:
        1px solid #262626;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 2.5%,
                #0b0b0b
            ),
            #090909
        );

    transition:
        border-color .18s ease,
        transform .18s ease;
}

.friend-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #333
        );

    transform:
        translateY(-1px);
}

.friend-card-identity {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.friend-card-avatar {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 32%,
            #333
        );

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 7%,
            #111
        );

    font-size: 22px;
}

.friend-card-avatar img,
.friend-profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.friend-card-name-wrap {
    min-width: 0;
}

.friend-card-name-line {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}

.friend-card-name-line strong {
    overflow: hidden;

    color: #e8e8e8;

    font-size: 12px;
    font-weight: 900;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.friend-card-name-line span {
    flex: 0 0 auto;

    color:
        var(--team-primary);

    font-size: 10px;
    font-weight: 1000;
}

.friend-card-name-wrap > small {
    display: block;

    margin-top: 3px;

    color: #7d7d7d;

    font-size: 9px;
}

.friend-card-name-wrap > em {
    display: block;

    margin-top: 4px;

    color: #666;

    font-size: 8px;
    font-style: normal;

    text-transform: uppercase;
}

.friend-card-meta small {
    display: block;

    color: #5f5f5f;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: .7px;
}

.friend-card-meta strong {
    display: block;

    margin-top: 4px;

    color: #999;

    font-size: 9px;
    font-weight: 800;
}

.friend-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 7px;
}

.friends-pending-chip {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 0 10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 28%,
            #333
        );

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 6%,
            #101010
        );

    color:
        var(--team-primary);

    font-size: 8px;
    font-weight: 1000;

    letter-spacing: .6px;
}

.friends-empty {
    padding: 26px 16px;

    border:
        1px dashed #292929;

    border-radius: 12px;

    color: #777;

    text-align: center;

    font-size: 11px;

    line-height: 1.6;
}

.friends-empty > span {
    display: block;

    margin-bottom: 7px;

    font-size: 24px;
}

.friends-empty strong {
    display: block;

    color: #aaa;

    font-size: 12px;
}

.friends-empty p {
    margin-top: 5px;
}

.friends-empty.error {
    border-color:
        rgba(255, 87, 87, .25);

    color: #ff8f8f;
}


/* =========================================================
   PERFIL DEL AMIGO
========================================================= */

.friend-driver-profile {
    margin-top: 4px;
}

.friends-back-button {
    margin-bottom: 16px;
}

.friend-driver-profile-content {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.friend-profile-hero {
    display: flex;
    align-items: center;

    gap: 20px;

    padding: 24px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 25%,
            #292929
        );

    border-radius: 16px;

    background:
        radial-gradient(
            circle at top left,
            color-mix(
                in srgb,
                var(--team-primary) 11%,
                #111
            ),
            #0d0d0d 55%
        );
}

.friend-profile-avatar {
    display: grid;
    place-items: center;

    width: 94px;
    height: 94px;

    flex: 0 0 94px;

    overflow: hidden;

    border:
        2px solid
        color-mix(
            in srgb,
            var(--team-primary) 52%,
            #333
        );

    border-radius: 22px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 9%,
            #111
        );

    font-size: 34px;
}

.friend-profile-label {
    color:
        var(--team-primary);

    font-size: 8px;
    font-weight: 1000;

    letter-spacing: 1.4px;
}

.friend-profile-name-line {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 5px;
}

.friend-profile-name-line h2 {
    margin: 0;

    color: #fff;

    font-size: 26px;
}

.friend-profile-name-line > span {
    color:
        var(--team-primary);

    font-size: 18px;
    font-weight: 1000;
}

.friend-profile-identity > p {
    margin-top: 4px;

    color: #8a8a8a;

    font-size: 11px;
}

.friend-profile-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 12px;
}

.friend-profile-tags span {
    padding: 6px 9px;

    border:
        1px solid #2b2b2b;

    border-radius: 999px;

    background: #0a0a0a;

    color: #aaa;

    font-size: 8.5px;
    font-weight: 800;
}

.friend-profile-stats-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 9px;
}

.friend-profile-stats-grid > div {
    min-height: 82px;

    padding: 13px;

    border:
        1px solid #282828;

    border-radius: 12px;

    background: #0d0d0d;
}

.friend-profile-stats-grid small {
    display: block;

    color: #666;

    font-size: 7px;
    font-weight: 1000;

    letter-spacing: .7px;
}

.friend-profile-stats-grid strong {
    display: block;

    margin-top: 7px;

    color:
        var(--team-primary);

    font-size: 20px;
    font-weight: 1000;
}

.friend-profile-races-section {
    padding: 20px;

    border:
        1px solid #292929;

    border-radius: 15px;

    background: #101010;
}

.friend-profile-races-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.friend-profile-race-card {
    padding: 14px;

    border:
        1px solid #262626;

    border-radius: 11px;

    background:
        #0a0a0a;
}

.friend-profile-race-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.friend-profile-race-head small {
    display: block;

    color:
        var(--team-primary);

    font-size: 7px;
    font-weight: 1000;

    letter-spacing: .7px;
}

.friend-profile-race-head strong {
    display: block;

    margin-top: 3px;

    color: #ddd;

    font-size: 11px;
}

.friend-profile-race-head > span {
    color:
        var(--team-primary);

    font-size: 16px;
    font-weight: 1000;
}

.friend-profile-race-card > p {
    margin: 9px 0;

    color: #777;

    font-size: 8.5px;
}

.friend-profile-race-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    padding-top: 9px;

    border-top:
        1px solid #202020;
}

.friend-profile-race-meta small {
    display: block;

    color: #555;

    font-size: 6.5px;
    font-weight: 900;
}

.friend-profile-race-meta strong {
    display: block;

    margin-top: 3px;

    color: #999;

    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   RESPONSIVE AMIGOS
========================================================= */

@media (max-width: 980px) {

    .friend-card {
        grid-template-columns:
            minmax(220px, 1fr)
            auto;
    }

    .friend-card-meta {
        display: none;
    }

    .friend-profile-stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {

    .friends-summary-grid {
        grid-template-columns:
            1fr;
    }

    .friends-summary-card {
        min-height: 72px;
    }

    .friends-search-row {
        grid-template-columns:
            1fr;
    }

    .friends-search-row
    .friends-primary-button {
        width: 100%;
    }

    .friends-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .friends-refresh-button {
        width: 100%;
    }

    .friend-card {
        grid-template-columns:
            1fr;

        align-items: stretch;
    }

    .friend-card-meta {
        display: block;
    }

    .friend-card-actions {
        justify-content: flex-start;
    }

    .friend-card-actions button {
        flex: 1 1 auto;
    }

    .friend-profile-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 20px;
    }

    .friend-profile-avatar {
        width: 82px;
        height: 82px;

        flex-basis: 82px;
    }

    .friend-profile-name-line {
        align-items: flex-start;
        flex-direction: column;

        gap: 3px;
    }

    .friend-profile-name-line h2 {
        font-size: 22px;
    }

    .friend-profile-stats-grid,
    .friend-profile-races-list {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   V10.4.2 · PERFIL DE AMIGO · ESTILO MIS ESTADÍSTICAS
========================================================= */

#page-friends .friend-driver-profile-content {
    display: block;
}

#page-friends .friend-stats-profile-layout {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

#page-friends .friend-stats-full {
    grid-column: 1 / -1;
}

#page-friends .friend-stats-top-card {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 92px;

    padding: 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 42%,
            #252525
        );

    border-radius: 15px;

    background:
        linear-gradient(
            105deg,
            color-mix(
                in srgb,
                var(--team-primary) 13%,
                #101010
            ),
            #101010 45%,
            #0b0b0b 100%
        );

    box-shadow:
        inset 0 1px 0
        color-mix(
            in srgb,
            var(--team-primary) 12%,
            transparent
        );
}

#page-friends .friend-stats-driver {
    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;
}

#page-friends .friend-stats-driver-avatar {
    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 58%,
            #303030
        );

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--team-primary) 8%,
            #111
        );

    font-size: 26px;
}

#page-friends .friend-stats-driver-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

#page-friends .friend-stats-driver-info {
    min-width: 0;
}

#page-friends .friend-stats-driver-name {
    display: flex;
    align-items: center;

    gap: 7px;
}

#page-friends .friend-stats-driver-name h2 {
    margin: 0;

    color: #fff;

    font-size: 21px;
    font-weight: 1000;
}

#page-friends .friend-stats-driver-name > span {
    color:
        var(--team-primary);

    font-size: 17px;
    font-weight: 1000;
}

#page-friends .friend-stats-driver-info > p {
    margin-top: 4px;

    color: #757575;

    font-size: 9px;
    font-weight: 700;
}

#page-friends .friend-stats-driver-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}

#page-friends .friend-stats-driver-tags > span {
    padding: 4px 7px;

    border:
        1px solid #252525;

    border-radius: 999px;

    background: #0a0a0a;

    color: #8f8f8f;

    font-size: 7.5px;
    font-weight: 800;
}

#page-friends .friend-stats-top-summary {
    display: grid;
    grid-template-columns:
        repeat(3, auto);

    flex: 0 0 auto;
}

#page-friends .friend-stats-top-summary > div {
    min-width: 70px;

    padding: 0 18px;

    border-left:
        1px solid #242424;

    text-align: center;
}

#page-friends .friend-stats-top-summary strong {
    display: block;

    color: #fff;

    font-size: 18px;
    font-weight: 1000;
}

#page-friends .friend-stats-top-summary small {
    display: block;

    margin-top: 4px;

    color: #666;

    font-size: 6px;
    font-weight: 1000;

    letter-spacing: .65px;
}


#page-friends .friend-stats-panel {
    position: relative;

    overflow: hidden;

    min-height: 145px;

    padding: 16px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 23%,
            #282828
        );

    border-radius: 14px;

    background:
        linear-gradient(
            105deg,
            color-mix(
                in srgb,
                var(--team-primary) 7%,
                #101010
            ),
            #0e0e0e 35%,
            #0b0b0b 100%
        );
}

#page-friends .friend-stats-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 64px;
    height: 2px;

    background:
        var(--team-primary);
}

#page-friends .friend-stats-panel-title {
    margin-bottom: 13px;
}

#page-friends .friend-stats-panel-title small {
    display: block;

    color:
        var(--team-primary);

    font-size: 6.5px;
    font-weight: 1000;

    letter-spacing: 1px;
}

#page-friends .friend-stats-panel-title h3 {
    margin: 4px 0 0;

    color: #fff;

    font-size: 17px;
    font-weight: 1000;
}


#page-friends .friend-stats-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

#page-friends .friend-stats-summary-grid > div {
    min-height: 48px;

    padding: 9px;

    border:
        1px solid #252525;

    border-radius: 8px;

    background:
        rgba(5, 5, 5, .34);
}

#page-friends .friend-stats-summary-grid strong {
    display: block;

    color: #fff;

    font-size: 17px;
    font-weight: 1000;
}

#page-friends .friend-stats-summary-grid span {
    display: block;

    margin-top: 4px;

    color: #616161;

    font-size: 6.5px;
    font-weight: 1000;

    letter-spacing: .55px;
}


#page-friends .friend-stats-main-grid {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

#page-friends .friend-stats-performance-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}

#page-friends .friend-stats-gauge {
    --friend-gauge-value: 0;

    min-width: 0;
}

#page-friends .friend-stats-gauge-ring {
    position: relative;

    display: grid;
    place-items: center;

    width: 100%;
    aspect-ratio: 1.25 / 1;

    min-height: 110px;

    border:
        1px solid #252525;

    border-radius: 10px;

    background:
        #0c0c0c;
}

#page-friends .friend-stats-gauge-ring::before {
    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 225deg,
            var(--team-primary)
                calc(
                    var(--friend-gauge-value)
                    * 2.7deg
                ),
            #242424 0deg 270deg,
            transparent 270deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 54%,
            #000 56%
        );

    mask:
        radial-gradient(
            circle,
            transparent 54%,
            #000 56%
        );

    transform:
        rotate(0deg);
}

#page-friends .friend-stats-gauge-center {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;
}

#page-friends .friend-stats-gauge-center strong {
    color: #fff;

    font-size: 13px;
    font-weight: 1000;
}

#page-friends .friend-stats-gauge-center span {
    margin-top: 18px;

    color: #7a7a7a;

    font-size: 6px;
    font-weight: 1000;

    letter-spacing: .6px;
}


#page-friends .friend-stats-latest-card {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

#page-friends .friend-stats-latest-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

#page-friends .friend-stats-latest-main small {
    display: block;

    color:
        var(--team-primary);

    font-size: 6px;
    font-weight: 1000;

    letter-spacing: .6px;
}

#page-friends .friend-stats-latest-main strong {
    display: block;

    margin-top: 3px;

    color: #ddd;

    font-size: 12px;
}

#page-friends .friend-stats-latest-main p {
    margin-top: 5px;

    color: #666;

    font-size: 8px;
}

#page-friends .friend-stats-finish-position {
    color:
        var(--team-primary);

    font-size: 24px;
    font-weight: 1000;
}

#page-friends .friend-stats-latest-meta {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;

    padding-top: 10px;

    border-top:
        1px solid #222;
}

#page-friends .friend-stats-latest-meta small {
    display: block;

    color: #555;

    font-size: 6px;
    font-weight: 1000;
}

#page-friends .friend-stats-latest-meta strong {
    display: block;

    margin-top: 3px;

    color: #999;

    font-size: 8px;
}


#page-friends .friend-stats-recent-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

#page-friends .friend-stats-recent-card {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(260px, auto);

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border:
        1px solid #232323;

    border-radius: 9px;

    background:
        rgba(5, 5, 5, .32);
}

#page-friends .friend-stats-recent-left small {
    display: block;

    color:
        var(--team-primary);

    font-size: 6px;
    font-weight: 1000;
}

#page-friends .friend-stats-recent-left strong {
    display: block;

    margin-top: 2px;

    color: #d7d7d7;

    font-size: 10px;
}

#page-friends .friend-stats-recent-left p {
    margin-top: 3px;

    color: #626262;

    font-size: 7.5px;
}

#page-friends .friend-stats-recent-data {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(70px, 1fr));

    gap: 8px;
}

#page-friends .friend-stats-recent-data small {
    display: block;

    color: #555;

    font-size: 5.5px;
    font-weight: 1000;
}

#page-friends .friend-stats-recent-data strong {
    display: block;

    margin-top: 3px;

    color: #999;

    font-size: 8px;
}

#page-friends .friend-stats-empty-block {
    display: grid;
    place-items: center;

    min-height: 85px;

    border:
        1px dashed #292929;

    border-radius: 10px;

    color: #666;

    font-size: 8px;

    text-align: center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    #page-friends .friend-stats-profile-layout,
    #page-friends .friend-stats-main-grid {
        grid-template-columns:
            1fr;
    }

    #page-friends .friend-stats-full {
        grid-column: auto;
    }

    #page-friends .friend-stats-top-card {
        align-items: flex-start;
        flex-direction: column;
    }

    #page-friends .friend-stats-top-summary {
        width: 100%;
    }

    #page-friends .friend-stats-top-summary > div {
        flex: 1;
    }

    #page-friends .friend-stats-performance-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    #page-friends .friend-stats-driver {
        align-items: flex-start;
    }

    #page-friends .friend-stats-driver-name {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }

    #page-friends .friend-stats-driver-name h2 {
        font-size: 18px;
    }

    #page-friends .friend-stats-top-summary > div {
        min-width: 0;

        padding: 0 8px;
    }

    #page-friends .friend-stats-top-summary strong {
        font-size: 16px;
    }

    #page-friends .friend-stats-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #page-friends .friend-stats-performance-grid {
        grid-template-columns:
            1fr 1fr;
    }

    #page-friends .friend-stats-recent-card {
        grid-template-columns:
            1fr;
    }

    #page-friends .friend-stats-recent-data {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   V10.5 · SOCIAL · BLOQUEOS + PRIVACIDAD + PERFIL PROPIO
========================================================= */

#page-friends .friends-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-friends .friends-blocked-help {
    margin: -4px 0 14px;
    color: #777;
    font-size: 10px;
    line-height: 1.55;
}

.friends-block-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 87, 87, .30);
    border-radius: 9px;
    background: rgba(255, 87, 87, .045);
    color: #ff8484;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .45px;
    cursor: pointer;
    transition: .18s ease;
}

.friends-block-button.compact {
    min-height: 36px;
    padding: 0 12px;
    font-size: 9px;
}

.friends-block-button:hover {
    border-color: rgba(255, 87, 87, .65);
    background: rgba(255, 87, 87, .10);
    transform: translateY(-1px);
}

.friends-status-chip.friends {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(50, 213, 131, .25);
    border-radius: 999px;
    background: rgba(50, 213, 131, .05);
    color: #67dfa3;
    font-size: 8px;
    font-weight: 1000;
}

#page-friends .blocked-card {
    border-color: rgba(255, 87, 87, .16);
}

#page-friends .friend-stats-driver-actions {
    margin-top: 10px;
}

#page-profile .profile-social-row {
    align-items: center;
}

#page-profile .profile-social-info {
    min-width: 0;
}

#page-profile .profile-social-friends-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 24%, #2d2d2d);
    border-radius: 10px;
    background: color-mix(in srgb, var(--team-primary) 5%, #0c0c0c);
}

#page-profile .profile-social-friends-count > span {
    font-size: 19px;
}

#page-profile .profile-social-friends-count strong {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 1000;
}

#page-profile .profile-social-friends-count small {
    display: block;
    margin-top: 1px;
    color: #6f6f6f;
    font-size: 7px;
    font-weight: 1000;
    letter-spacing: .7px;
}

#page-profile .profile-social-controls {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto auto;
    align-items: end;
    gap: 9px;
    width: min(100%, 620px);
}

#page-profile .profile-social-controls label {
    grid-column: 1 / -1;
    color: #777;
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: .8px;
}

#page-profile .profile-social-controls .profile-team-select {
    min-height: 44px;
}

@media (max-width: 980px) {

    #page-friends .friends-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #page-profile .profile-social-controls {
        grid-template-columns: 1fr;
    }

    #page-profile .profile-social-controls label {
        grid-column: auto;
    }
}

@media (max-width: 620px) {

    #page-friends .friends-summary-grid {
        grid-template-columns: 1fr;
    }

    #page-profile .profile-social-row {
        align-items: stretch;
    }

    #page-profile .profile-social-controls {
        width: 100%;
    }

    #page-profile .profile-social-controls .profile-secondary-button {
        width: 100%;
    }
}


/* =========================================================
   V10.5.1 · PERFIL REORGANIZADO
========================================================= */

#page-profile .profile-panel {
    max-width: 980px;
    margin: 34px auto 0;
    padding: 0;
    background: transparent;
    border: none;
}

#page-profile .profile-main-card {
    margin-bottom: 16px;
    padding: 22px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--team-primary) 26%,
            #2b2b2b
        );
    border-radius: 16px;
    background:
        linear-gradient(
            115deg,
            color-mix(
                in srgb,
                var(--team-primary) 8%,
                #111
            ),
            #0d0d0d
        );
}

#page-profile .profile-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#page-profile .profile-settings-group {
    padding: 18px;
    border: 1px solid #292929;
    border-radius: 15px;
    background: #101010;
}

#page-profile .profile-settings-group-heading {
    margin-bottom: 14px;
}

#page-profile .profile-settings-group-heading small {
    display: block;
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 1000;
    letter-spacing: 1.2px;
}

#page-profile .profile-settings-group-heading h3 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
}

#page-profile .profile-settings-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#page-profile .profile-settings-group-grid > .profile-editor-row,
#page-profile .profile-settings-social-group > .profile-editor-row {
    margin: 0;
    padding: 16px;
    border: 1px solid #262626;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--team-primary) 3%,
                #0c0c0c
            ),
            #090909
        );
}

#page-profile .profile-editor-row {
    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#page-profile .profile-editor-row > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

#page-profile .profile-editor-row small {
    color: var(--team-primary);
}

#page-profile .profile-editor-row strong {
    display: block;
    margin-top: 4px;
}

#page-profile .profile-change-info {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

#page-profile .profile-team-selector,
#page-profile .profile-icon-selector {
    width: min(100%, 250px);
}

#page-profile .profile-team-selector {
    display: grid;
    gap: 8px;
}

#page-profile .profile-team-select {
    width: 100%;
}

#page-profile .profile-icon-selector {
    display: flex;
    justify-content: flex-end;
}

#page-profile .current-icon-display {
    margin-top: 10px;
}


/* SOCIAL Y PRIVACIDAD */
#page-profile .profile-settings-social-group .profile-social-row {
    min-height: auto;
}

#page-profile .profile-social-row {
    display: grid;
    grid-template-columns:
        minmax(220px, .8fr)
        minmax(320px, 1.2fr);
    gap: 18px;
    align-items: center;
}

#page-profile .profile-social-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#page-profile .profile-social-friends-count {
    margin-top: 12px;
}

#page-profile .profile-social-controls {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 9px;
    align-items: end;
    width: 100%;
}

#page-profile .profile-social-controls label {
    grid-column: 1 / -1;
}

#page-profile .profile-social-controls select {
    grid-column: 1 / 2;
}

#page-profile
.profile-social-controls
.profile-secondary-button:nth-of-type(1) {
    grid-column: 2 / 3;
}

#page-profile
.profile-social-controls
.profile-secondary-button:nth-of-type(2) {
    grid-column: 1 / -1;
    width: 100%;
}

#page-profile
.profile-settings-group-grid
.profile-editor-row
.profile-secondary-button {
    min-width: 170px;
}


@media (max-width: 900px) {

    #page-profile .profile-settings-group-grid {
        grid-template-columns: 1fr;
    }

    #page-profile .profile-social-row {
        grid-template-columns: 1fr;
    }

    #page-profile .profile-editor-row {
        min-height: auto;
    }
}


@media (max-width: 620px) {

    #page-profile .profile-panel {
        margin-top: 20px;
    }

    #page-profile .profile-settings-group {
        padding: 13px;
    }

    #page-profile .profile-editor-row {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    #page-profile .profile-team-selector,
    #page-profile .profile-icon-selector {
        width: 100%;
        max-width: none;
    }

    #page-profile .profile-icon-selector {
        justify-content: stretch;
    }

    #page-profile
    .profile-icon-selector
    .profile-secondary-button,
    #page-profile
    .profile-team-selector
    .profile-secondary-button {
        width: 100%;
    }

    #page-profile .profile-social-controls {
        grid-template-columns: 1fr;
    }

    #page-profile .profile-social-controls label,
    #page-profile .profile-social-controls select,
    #page-profile
    .profile-social-controls
    .profile-secondary-button:nth-of-type(1),
    #page-profile
    .profile-social-controls
    .profile-secondary-button:nth-of-type(2) {
        grid-column: 1;
    }
}


/* =========================================================
   V10.5.4 · BLOQUEO PREMIUM UNIFICADO
   SETUPS + ESTADÍSTICAS
========================================================= */

/*
   Contenedor exterior.
   Mantiene exactamente la misma posición y proporción
   en todos los módulos Premium bloqueados.
*/
.premium-locked-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 70px 20px 40px;
}


/*
   Tarjeta única de bloqueo Premium.
*/
.premium-locked-card {
    position: relative;

    width: 100%;
    max-width: 720px;

    padding: 44px 28px;

    text-align: center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 24%,
            #333
        );

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 4%,
                #111
            ),
            #0d0d0d
        );

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .28);
}


/*
   Línea de acento superior.
*/
.premium-locked-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 78px;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 999px 999px;

    background:
        var(--team-primary);
}


/*
   Candado.
*/
.premium-locked-icon {
    display: block;

    margin-bottom: 14px;

    font-size: 52px;
    line-height: 1;
}


/*
   Título.
*/
.premium-locked-card h2 {
    margin: 0;

    color: #fff;

    font-size: 24px;
    font-weight: 900;

    letter-spacing: .2px;
}


/*
   Descripción.
*/
.premium-locked-card p {
    max-width: 570px;

    margin: 12px auto 0;

    color: #999;

    font-size: 15px;
    line-height: 1.6;
}


/*
   Botón.
*/
.premium-locked-button {
    width: min(100%, 660px);

    margin: 18px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    border-radius: 9px;
}


/*
   Compatibilidad:
   cualquier access-denied-card antiguo mantiene el
   mismo estilo mientras terminamos de migrar módulos.
*/
.access-denied-card {
    width: 100%;
    max-width: 720px;

    margin: 70px auto 0;
    padding: 44px 28px;

    text-align: center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--team-primary) 24%,
            #333
        );

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--team-primary) 4%,
                #111
            ),
            #0d0d0d
        );
}


/*
   Estadísticas ya no debe heredar el panel gigante anterior.
*/
body #page-history .premium-locked-wrapper {
    padding-top: 58px;
}

body #page-history .premium-locked-card {
    min-height: 0;
}


/*
   Neutralizamos el antiguo diseño específico
   de .stats-locked sin afectar otros paneles.
*/
body #page-history .stats-locked {
    padding: 0;
    border: 0;
    background: transparent;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .premium-locked-wrapper {
        padding:
            34px 12px
            28px;
    }

    body #page-history .premium-locked-wrapper {
        padding-top: 34px;
    }

    .premium-locked-card {
        padding:
            34px 20px;
    }

    .premium-locked-icon {
        font-size: 44px;
    }

    .premium-locked-card h2 {
        font-size: 20px;
    }

    .premium-locked-card p {
        font-size: 13px;
    }

    .premium-locked-button {
        width: 100%;
    }
}


/* =========================================================
   PREMIUM · PREVISUALIZACIÓN INTERACTIVA DE PLANES
========================================================= */

.premium-plan-card {
    cursor: pointer;
}

.premium-plan-card.premium-plan-selected {
    transform: translateY(-4px);
    border-color: rgba(255, 140, 0, 0.72);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 140, 0, 0.10),
        0 0 34px rgba(255, 140, 0, 0.08);
}

.premium-plan-card-pro.premium-plan-selected {
    border-color: rgba(255, 204, 55, 0.78);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.44),
        0 0 0 1px rgba(255, 204, 55, 0.11),
        0 0 38px rgba(255, 204, 55, 0.10);
}


.premium-plan-preview {
    position: relative;
    width: min(100%, 1180px);
    margin: 38px auto 0;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 140, 0, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255, 132, 0, 0.09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(20, 20, 20, 0.98),
            rgba(8, 8, 8, 0.99)
        );
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    scroll-margin-top: 24px;
}

.premium-plan-preview::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 140, 0, 0.92),
            transparent
        );
}

.premium-plan-preview-pro {
    border-color: rgba(255, 204, 55, 0.32);
    background:
        radial-gradient(
            circle at 84% 0%,
            rgba(255, 204, 55, 0.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(22, 20, 12, 0.98),
            rgba(8, 8, 8, 0.99)
        );
}

.premium-plan-preview-pro::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 204, 55, 0.95),
            transparent
        );
}


.premium-preview-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.premium-preview-eyebrow {
    margin: 0 0 8px;
    color: #ff8a00;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 2.2px;
}

.premium-plan-preview-pro .premium-preview-eyebrow {
    color: #ffd33d;
}

.premium-preview-heading h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    letter-spacing: -0.7px;
}

.premium-preview-heading p:not(.premium-preview-eyebrow) {
    max-width: 700px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.6;
}

.premium-preview-badge {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid rgba(255, 140, 0, 0.38);
    border-radius: 999px;
    background: rgba(255, 140, 0, 0.09);
    color: #ff970f;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.5px;
}

.premium-plan-preview-pro .premium-preview-badge {
    border-color: rgba(255, 204, 55, 0.38);
    background: rgba(255, 204, 55, 0.09);
    color: #ffd33d;
}


.premium-preview-content {
    position: relative;
    z-index: 2;
}

.premium-preview-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 16px;
}

.premium-preview-showcase-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.premium-preview-window {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(19, 19, 19, 0.98),
            rgba(10, 10, 10, 0.98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.premium-preview-window-wide {
    min-height: 260px;
}

.premium-preview-window-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.premium-preview-window-head > div {
    min-width: 0;
}

.premium-preview-window-head strong,
.premium-preview-driver-head strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 850;
}

.premium-preview-kicker {
    display: block;
    color: #ff8a00;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.7px;
}

.premium-plan-preview-pro .premium-preview-kicker {
    color: #ffd33d;
}

.premium-preview-status {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(50, 213, 131, 0.22);
    border-radius: 999px;
    background: rgba(50, 213, 131, 0.07);
    color: #32d583;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.premium-preview-mini-icon {
    font-size: 20px;
}


.premium-preview-setup-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.premium-preview-setup-grid > div {
    padding: 14px 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.premium-preview-setup-grid small,
.premium-preview-stats small,
.premium-preview-gauges small {
    display: block;
    color: rgba(255, 255, 255, 0.38);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.premium-preview-setup-grid strong {
    display: block;
    margin-top: 7px;
    font-size: 14px;
}

.premium-preview-tabs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.premium-preview-tabs span {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 850;
}

.premium-preview-tabs span.active {
    border-color: rgba(255, 140, 0, 0.28);
    background: rgba(255, 140, 0, 0.08);
    color: #ffffff;
}


.premium-preview-strategy {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.premium-preview-stint {
    display: flex;
    align-items: center;
    gap: 9px;
}

.premium-preview-stint small {
    display: block;
    color: rgba(255, 255, 255, 0.36);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.premium-preview-stint strong {
    display: block;
    margin-top: 3px;
    font-size: 10px;
}

.premium-preview-tyre {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: 3px solid currentColor;
    background: #090909;
    font-size: 10px;
    font-weight: 950;
}

.premium-preview-tyre.soft {
    color: #ff5151;
}

.premium-preview-tyre.medium {
    color: #ffd83d;
}

.premium-preview-arrow {
    color: rgba(255, 255, 255, 0.35);
}

.premium-preview-info-row,
.premium-preview-race-row,
.premium-preview-stat-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 10px;
}

.premium-preview-info-row span,
.premium-preview-race-row span,
.premium-preview-stat-list span {
    color: rgba(255, 255, 255, 0.52);
}

.premium-preview-info-row strong,
.premium-preview-race-row strong,
.premium-preview-stat-list strong {
    font-size: 11px;
}


.premium-preview-driver {
    grid-column: 1 / -1;
}

.premium-preview-driver-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
}

.premium-preview-driver-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 204, 55, 0.22);
    border-radius: 13px;
    background: rgba(255, 204, 55, 0.06);
    font-size: 22px;
}

.premium-preview-number {
    color: #ffd33d;
    font-size: 17px;
    font-weight: 950;
}

.premium-preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.premium-preview-stats > div {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.02);
}

.premium-preview-stats strong {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
}


.premium-preview-gauges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.premium-preview-gauges > div {
    text-align: center;
}

.premium-preview-gauges span {
    position: relative;
    display: grid;
    place-items: end center;
    width: 78px;
    height: 40px;
    margin: 0 auto 9px;
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
}

.premium-preview-gauges span::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    height: 68px;
    border: 7px solid rgba(255, 255, 255, 0.09);
    border-bottom-color: transparent;
    border-radius: 50%;
}

.premium-preview-gauges span::after {
    content: "";
    position: absolute;

    /*
       La aguja nace exactamente desde el centro inferior
       del medidor y apunta hacia la semicircunferencia.
    */
    left: 50%;
    bottom: 4px;

    width: 27px;
    height: 2px;

    transform-origin: 0 50%;
    transform: rotate(var(--preview-angle, -90deg));

    border-radius: 999px;

    background: var(--team-primary);

    box-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--team-primary) 65%,
            transparent
        );

    z-index: 4;
    pointer-events: none;
}

.premium-preview-gauges small {
    margin-top: 5px;
}


.premium-preview-pro-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 204, 55, 0.16);
    border-radius: 14px;
    background: rgba(255, 204, 55, 0.045);
}

.premium-preview-pro-note > span {
    font-size: 24px;
}

.premium-preview-pro-note strong {
    font-size: 12px;
}

.premium-preview-pro-note p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    line-height: 1.5;
}


.premium-preview-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.065);
}

.premium-preview-footer span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 800;
}

.premium-preview-footer small {
    color: rgba(255, 255, 255, 0.34);
    font-size: 9px;
}


@media (max-width: 900px) {

    .premium-plan-preview {
        padding: 24px;
    }

    .premium-preview-showcase,
    .premium-preview-showcase-pro {
        grid-template-columns: 1fr;
    }

    .premium-preview-driver {
        grid-column: auto;
    }

    .premium-preview-setup-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 560px) {

    .premium-plan-preview {
        margin-top: 26px;
        padding: 18px;
        border-radius: 18px;
    }

    .premium-preview-heading {
        flex-direction: column;
        gap: 12px;
    }

    .premium-preview-heading h2 {
        font-size: 23px;
    }

    .premium-preview-window {
        padding: 16px;
    }

    .premium-preview-setup-grid {
        grid-template-columns: 1fr 1fr;
    }

    .premium-preview-strategy {
        grid-template-columns: 1fr;
    }

    .premium-preview-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .premium-preview-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .premium-preview-stats > div {
        padding: 11px 8px;
        text-align: center;
    }

    .premium-preview-stats strong {
        font-size: 17px;
    }

    .premium-preview-gauges {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .premium-preview-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

/* =========================================================
   V10.5.6 · PREVISUALIZACIÓN PREMIUM CON COLOR DE ESCUDERÍA
   Hereda automáticamente --team-primary / --team-secondary
   definidos por applyFavoriteTeamTheme().
========================================================= */

.premium-plan-card.premium-plan-selected,
.premium-plan-card-pro.premium-plan-selected {
    border-color: var(--team-primary);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.44),
        0 0 0 1px color-mix(in srgb, var(--team-primary) 18%, transparent),
        0 0 38px color-mix(in srgb, var(--team-primary) 16%, transparent);
}

.premium-plan-preview,
.premium-plan-preview.premium-plan-preview-pro {
    border-color: color-mix(in srgb, var(--team-primary) 38%, transparent);
    background:
        radial-gradient(
            circle at 15% 0%,
            color-mix(in srgb, var(--team-primary) 13%, transparent),
            transparent 36%
        ),
        radial-gradient(
            circle at 88% 4%,
            color-mix(in srgb, var(--team-secondary) 52%, transparent),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(20, 20, 20, 0.98),
            rgba(8, 8, 8, 0.99)
        );
}

.premium-plan-preview::before,
.premium-plan-preview.premium-plan-preview-pro::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--team-primary),
            transparent
        );
}

.premium-preview-eyebrow,
.premium-plan-preview-pro .premium-preview-eyebrow,
.premium-preview-kicker,
.premium-plan-preview-pro .premium-preview-kicker {
    color: var(--team-primary);
}

.premium-preview-badge,
.premium-plan-preview-pro .premium-preview-badge {
    border-color: color-mix(in srgb, var(--team-primary) 42%, transparent);
    background: color-mix(in srgb, var(--team-primary) 11%, transparent);
    color: var(--team-primary);
}

.premium-preview-tabs .active {
    border-color: color-mix(in srgb, var(--team-primary) 42%, transparent);
    background: color-mix(in srgb, var(--team-primary) 12%, transparent);
    color: var(--team-primary);
}

.premium-preview-driver,
.premium-preview-highlight,
.premium-preview-footer {
    border-color: color-mix(in srgb, var(--team-primary) 24%, transparent);
}

.premium-preview-driver-avatar,
.premium-preview-stat-value,
.premium-preview-highlight strong,
.premium-preview-footer strong {
    color: var(--team-primary);
}

/* Mantener colores funcionales: neumáticos, disponible, alertas, etc. */

/* =========================================================
   V10.5.7 · PREMIUM PRO · COMPATIBILIDAD DE ESTADÍSTICAS
========================================================= */

.premium-pro-platform-note {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--team-primary) 7%, rgba(8, 8, 8, 0.92));
}

.premium-pro-platform-note-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.premium-pro-platform-note-title strong {
    color: var(--team-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.4px;
}

.premium-pro-platform-status {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.premium-platform-chip {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .7px;
}

.premium-platform-chip-live {
    border: 1px solid rgba(50, 213, 131, .28);
    background: rgba(50, 213, 131, .08);
    color: #32d583;
}

.premium-platform-chip-soon {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .52);
}

.premium-pro-platform-note p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .46);
    font-size: 9px;
    line-height: 1.55;
}

.premium-upgrade-platform-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    color: rgba(255, 255, 255, .55);
    font-size: 9px;
    font-weight: 800;
}


/* PREVISUALIZACIÓN PRO */

.premium-preview-compatibility {
    position: relative;
    z-index: 2;
    margin-top: 16px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 24%, transparent);
    border-radius: 17px;
    background:
        radial-gradient(
            circle at 8% 0%,
            color-mix(in srgb, var(--team-primary) 8%, transparent),
            transparent 42%
        ),
        rgba(10, 10, 10, .82);
}

.premium-preview-compatibility-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.premium-preview-compatibility-head strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 900;
}

.premium-preview-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.premium-preview-platform {
    min-width: 0;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.premium-preview-platform > span {
    display: block;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .52);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.1px;
}

.premium-preview-platform > strong {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .7px;
}

.premium-preview-platform small {
    display: block;
    color: rgba(255, 255, 255, .38);
    font-size: 8px;
    line-height: 1.5;
}

.premium-preview-platform-live {
    border: 1px solid rgba(50, 213, 131, .24);
    background: rgba(50, 213, 131, .045);
}

.premium-preview-platform-live > strong {
    color: #32d583;
}

.premium-preview-platform-soon {
    border: 1px solid rgba(255, 255, 255, .075);
}

.premium-preview-platform-soon > strong {
    color: var(--team-primary);
}

.premium-preview-compatibility-info {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .46);
    font-size: 9px;
    line-height: 1.6;
}


@media (max-width: 700px) {

    .premium-preview-platform-grid {
        grid-template-columns: 1fr;
    }

    .premium-upgrade-platform-note {
        flex-direction: column;
        gap: 5px;
    }
}



/* =========================================================
   V10.5.8 · PREMIUM PRO · COMPATIBILIDAD COMPACTA
========================================================= */

.premium-pro-platform-note {
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 24%, transparent);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--team-primary) 5%, #111),
            #0d0d0d
        );
}

.premium-pro-platform-note-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
}

.premium-pro-platform-note-title > span {
    flex: 0 0 auto;
    font-size: 16px;
}

.premium-pro-platform-note-title > div {
    min-width: 0;
}

.premium-pro-platform-note-title strong {
    display: block;
    color: var(--team-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.1px;
    line-height: 1.2;
}

.premium-pro-platform-note-title small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .38);
    font-size: 8px;
    line-height: 1.25;
}

.premium-pro-platform-status {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.premium-platform-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 8px;
    background: rgba(255, 255, 255, .025);
}

.premium-platform-row span {
    min-width: 0;
    color: rgba(255, 255, 255, .64);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .45px;
}

.premium-platform-row strong {
    flex: 0 0 auto;
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .65px;
    white-space: nowrap;
}

.premium-platform-row-live {
    border-color: rgba(50, 213, 131, .18);
    background: rgba(50, 213, 131, .035);
}

.premium-platform-row-live strong {
    color: #32d583;
}

.premium-pro-platform-note p {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .42);
    font-size: 8px;
    line-height: 1.5;
}


@media (max-width: 560px) {

    .premium-platform-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .premium-platform-row strong {
        white-space: normal;
    }
}


/* =========================================================
   V10.5.9 · CORRECCIÓN DEFINITIVA BLOQUE PREMIUM PRO
   Neutraliza estilos heredados de .premium-plan-benefits
========================================================= */

/*
   IMPORTANTE:
   .premium-plan-benefits > div aplicaba display:flex
   a esta caja completa. Aquí lo neutralizamos con
   mayor especificidad.
*/
.premium-plan-benefits > .premium-pro-platform-note {
    display: block;
    align-items: initial;
    gap: 0;
    min-height: 0;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 26%, transparent);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--team-primary) 5%, #111),
            #0d0d0d
        );
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}


/*
   Neutralizar también la regla genérica que convertía
   TODOS los span internos en círculos de 22x22.
*/
.premium-plan-card-pro
.premium-plan-benefits
> .premium-pro-platform-note
span {
    display: inline;
    width: auto;
    height: auto;
    flex: initial;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}


/* CABECERA */
.premium-pro-platform-note-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
}

.premium-plan-card-pro
.premium-plan-benefits
> .premium-pro-platform-note
.premium-pro-platform-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid color-mix(in srgb, var(--team-primary) 24%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--team-primary) 7%, transparent);
    font-size: 14px;
}

.premium-pro-platform-note-heading > div {
    min-width: 0;
}

.premium-pro-platform-note-heading strong {
    display: block;
    color: var(--team-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.1px;
    line-height: 1.2;
}

.premium-pro-platform-note-heading small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.38);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
}


/* PLATAFORMAS */
.premium-pro-platform-list {
    display: grid;
    gap: 7px;
}

.premium-pro-platform-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}

.premium-plan-card-pro
.premium-plan-benefits
> .premium-pro-platform-note
.premium-pro-platform-item span {
    color: rgba(255,255,255,.66);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .45px;
}

.premium-pro-platform-item strong {
    color: var(--team-primary);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .65px;
    white-space: nowrap;
}

.premium-pro-platform-item-live {
    border-color: rgba(50,213,131,.18);
    background: rgba(50,213,131,.04);
}

.premium-pro-platform-item-live strong {
    color: #32d583;
}


/* ACLARACIÓN */
.premium-plan-benefits
> .premium-pro-platform-note
.premium-pro-platform-copy {
    margin: 10px 0 0;
    color: rgba(255,255,255,.44);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.55;
}


@media (max-width: 560px) {

    .premium-pro-platform-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .premium-pro-platform-item strong {
        white-space: normal;
    }
}


/* =========================================================
   V10.5.10 · CENTRO DEL INDICADOR DE RENDIMIENTO
========================================================= */

.premium-preview-gauges span {
    isolation: isolate;
}

.premium-preview-gauges span > * {
    position: relative;
    z-index: 2;
}



/* =========================================================
   V10.5.11 · AGUJAS DE RENDIMIENTO VISIBLES
========================================================= */

.premium-preview-gauges span::before {
    z-index: 1;
}

.premium-preview-gauges span {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
   Punto central del indicador.
*/
.premium-preview-gauges span {
    text-shadow:
        0 1px 2px rgba(0,0,0,.95);
}

.premium-preview-gauges span::marker {
    display: none;
}



/* =========================================================
   V10.5.12 · AGUJAS DETRÁS DEL PORCENTAJE
========================================================= */

/*
   El porcentaje queda por delante y la aguja por detrás.
   Así la línea no atraviesa visualmente el número.
*/
.premium-preview-gauges span {
    position: relative;
    isolation: isolate;
}

.premium-preview-gauges span b {
    position: relative;
    z-index: 5;

    display: inline-block;

    padding: 1px 3px;

    color: #fff;

    font-size: inherit;
    font-weight: 950;
    line-height: 1;

    border-radius: 5px;

    background:
        rgba(10, 10, 10, .94);

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, .95);
}


/*
   Arco al fondo.
*/
.premium-preview-gauges span::before {
    z-index: 1;
}


/*
   Aguja más fina, corta y detrás del porcentaje.
*/
.premium-preview-gauges span::after {
    left: 50%;
    bottom: 4px;

    width: 23px;
    height: 1.5px;

    z-index: 2;

    opacity: .88;

    box-shadow:
        0 0 5px
        color-mix(
            in srgb,
            var(--team-primary) 50%,
            transparent
        );
}


/*
   Punto central discreto para que la aguja se vea integrada
   y no como una línea flotando.
*/
.premium-preview-gauges > div {
    position: relative;
}

.premium-preview-gauges > div::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 35px;

    width: 5px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--team-primary);

    box-shadow:
        0 0 5px
        color-mix(
            in srgb,
            var(--team-primary) 55%,
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   V10.5.13 · BAJAR PORCENTAJES DE LOS MEDIDORES
========================================================= */

.premium-preview-gauges span b {
    transform: translateY(6px);
}

@media (max-width: 560px) {

    .premium-preview-gauges span b {
        transform: translateY(5px);
    }
}


/* =========================================================
   V10.5.14 · PORCENTAJES DEBAJO DEL MEDIDOR
========================================================= */

.premium-preview-gauges > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Arco + aguja solamente. */
.premium-preview-gauges .premium-preview-gauge-dial {
    position: relative;
    display: block;
    width: 74px;
    height: 38px;
    overflow: hidden;
    isolation: isolate;
}

/* Porcentaje completamente fuera del semicírculo. */
.premium-preview-gauges .premium-preview-gauge-value {
    position: relative;
    z-index: 5;
    display: block;
    margin-top: 6px;
    padding: 0;
    transform: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    text-shadow: none;
}

/* Etiqueta debajo del porcentaje. */
.premium-preview-gauges > div > small {
    display: block;
    margin-top: 6px;
}

/* El punto central agregado anteriormente se elimina. */
.premium-preview-gauges > div::after {
    display: none;
}

/* Mantener la aguja dentro del arco. */
.premium-preview-gauges .premium-preview-gauge-dial::after {
    left: 50%;
    bottom: 4px;
    width: 23px;
    height: 1.5px;
    z-index: 2;
}