/* ============================================================
   SDPlay DESIGN SYSTEM v2 — SaaS Modern (Linear/Stripe/Notion)
   ============================================================ */

@font-face {
    font-family: 'Northlane Two';
    src: url('../fonts/Northlane/Northlane-Two.eot');
    src: url('../fonts/Northlane/Northlane-Two.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Northlane/Northlane-Two.woff2') format('woff2'),
        url('../fonts/Northlane/Northlane-Two.woff') format('woff'),
        url('../fonts/Northlane/Northlane-Two.ttf') format('truetype'),
        url('../fonts/Northlane/Northlane-Two.svg#Northlane-Two') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* SDPlay Brand Colors (extracted from logo) */
    --brand: #0FABB5;
    --brand-hover: #0D949C;
    --brand-light: #E6F8F9;
    --brand-dark: #0A7D85;

    --accent: #C8DC00;
    --accent-hover: #B0C400;
    --accent-light: #F9FCDB;

    --navy: #1B3A5C;
    --navy-hover: #15304D;
    --navy-light: #E8EDF3;

    /* Tokens base */
    --bg-body: #F7F8FA;
    --bg-card: #FFFFFF;
    --bg-subtle: #F2F3F5;
    --bg-hover: #F0F1F3;

    --text-primary: #1B3A5C;
    --text-secondary: #6B6F76;
    --text-tertiary: #9CA0A8;
    --text-inverse: #FFFFFF;

    --border-subtle: rgba(0,0,0,0.06);
    --border-card: rgba(0,0,0,0.05);

    --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --shadow-active: 0 2px 8px rgba(15,171,181,0.15);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
}

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

body {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-body);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==============================
   TIPOGRAFÍA
   ============================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--space-1);
}

h2 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

h3.match { font-size: 18px; }
h3.font-single {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    color: var(--text-secondary);
}

h4 { font-size: 16px; margin-bottom: var(--space-4); }
h5 { font-size: 14px; }

.cuerpo h1 { font-size: 32px; letter-spacing: -0.03em; }
.cuerpo h2 { font-size: 22px; }

p, .text-body { font-size: 14px; color: var(--text-primary); }
.text-muted, .text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary); }
.font-small { font-size: 0.8rem; }

.cursor { cursor: pointer; }
.disabled { opacity: 0.35; pointer-events: none; }

/* ==============================
   LAYOUT
   ============================== */
.cuerpo {
    padding: var(--space-5) var(--space-6);
}
.modal-body .cuerpo { padding: var(--space-4); }

.contenedor {
    flex-grow: 1;
    padding: 0;
    transition: margin-left 0.3s ease;
    background-color: var(--bg-body);
}
.contenedor-vacio {
    background-color: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 60px 40px;
    color: var(--text-secondary);
    text-align: center;
}

/* ==============================
   CARDS
   ============================== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    transition: box-shadow 0.15s;
}
.card-body {
    padding: 0;
}
.card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

hr:not([size]) {
    height: 1px;
    opacity: 0.12;
    color: #000;
    margin: var(--space-4) 0;
}
hr.fina:not([size]) {
    height: 1px;
    margin-top: 5px;
    opacity: 0.15;
}

/* ==============================
   SIDEBAR (estilos base, ver barranavegacion.css)
   ============================== */

/* ==============================
   HEADER
   ============================== */
#menu-superior {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    height: 64px;
    min-height: 64px;
}
#menu-superior .container-fluid {
    height: 100%;
    align-items: center;
    gap: var(--space-2);
}

/* ==============================
   BOTONES
   ============================== */
.btn {
    height: 48px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--text-inverse) !important;
}
.btn-primary:hover {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
    box-shadow: var(--shadow-active) !important;
}

.btn-default {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
.btn-default:hover {
    background: var(--bg-hover) !important;
}

.btn-outline-primary {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary);
}
.btn-outline-primary:hover {
    background: var(--bg-hover);
}

.btn-secondary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-inverse) !important;
}
.btn-secondary:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(200,220,0,0.3) !important;
}

.btn-icono {
    padding: 8px !important;
    height: auto !important;
    min-width: auto !important;
    background: transparent !important;
    border: none !important;
}

.btn-puntos {
    height: auto !important;
    min-width: auto !important;
    padding: 4px 8px;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}
.btn-puntos:hover {
    background: var(--bg-hover) !important;
}

.btn-pagos {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    padding: 2px 12px;
    font-size: 12px;
    height: auto;
}

.btn-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
    height: auto;
    min-height: 140px;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
}
.btn-dashboard h2 { font-size: 18px; margin: 0; }
.btn-dashboard h3 { font-size: 15px; font-weight: 500; margin: 0; }

/* ==============================
   FORMULARIOS E INPUTS
   ============================== */
.form-control {
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
    font-size: 14px;
    padding: 0 16px;
    color: var(--text-primary);
    transition: all 0.15s;
    margin-bottom: 0;
}
.form-control:focus {
    background: var(--bg-card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15,171,181,0.12);
    outline: none;
}
.form-control::placeholder {
    color: var(--text-tertiary);
}

textarea.form-control {
    height: auto;
    min-height: 100px;
    padding: 12px 16px;
}

.form-group {
    position: relative;
}
.form-group .form-label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 14px;
    pointer-events: none;
    transition: 0.2s;
}

.form-check-input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    margin-top: 0;
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.form-switch .form-check-input {
    width: 38px;
    height: 20px;
    border-radius: var(--radius-full);
    border-color: var(--text-tertiary);
}
.form-switch .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.cuerpo label, .form-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-payments .form-control {
    height: 28px;
    width: 120px;
    padding: 0 10px;
    font-size: 13px;
}

/* ==============================
   DATATABLES
   ============================== */
.rdt_Table {
    background: transparent !important;
}
.rdt_TableHeadRow {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    min-height: 48px !important;
}
.rdt_TableHeadRow > div {
    padding: 0 12px;
}
.rdt_TableRow {
    font-size: 14px;
    min-height: 64px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    transition: background 0.1s;
}
.rdt_TableRow:hover {
    background: var(--bg-body) !important;
}
.rdt_TableCol_Sortable span {
    color: var(--text-primary) !important;
}

.data-table-extensions {
    padding: 0 0 var(--space-3) 0 !important;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.data-table-extensions-filter {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 16px !important;
    background: var(--bg-subtle);
    height: 40px;
    font-size: 14px;
}
.data-table-extensions > .data-table-extensions-filter > .icon {
    background-size: 16px 16px;
}
.data-table-extensions > .data-table-extensions-filter > .filter-text {
    border-bottom: none !important;
}
.data-table-extensions > .data-table-extensions-action > button {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin: 0 4px;
    background: var(--bg-card);
    transition: background 0.15s;
}
.data-table-extensions > .data-table-extensions-action > button:hover {
    background: var(--bg-hover);
}

/* ==============================
   AVATARS
   ============================== */
.avatar {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 120px;
}
.avatar .img-profile {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-card);
    background: var(--bg-subtle);
    object-fit: cover;
    padding: 0;
}
.img-profile-small {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 0;
}
.avatar-menu {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    cursor: pointer;
}
.avatar-menu::after { display: none; }

.avatar-club {
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    cursor: pointer;
    height: 40px;
    font-size: 14px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.avatar-club .dropdown-menu { width: 300px; }

.editaravatar {
    font-size: 14px;
    color: var(--text-tertiary);
    cursor: pointer;
}

figure.club {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    margin: 0 10px 0 0;
    background: var(--bg-subtle);
}

/* ==============================
   BADGES
   ============================== */
.badge {
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge.bg-success {
    background: #DCFCE7 !important;
    color: #166534;
}
.badge.bg-warning {
    background: #FEF3C7 !important;
    color: #92400E;
}
.badge.bg-danger {
    background: #FEE2E2 !important;
    color: #991B1B;
}
.badge.bg-info {
    background: #E0F2FE !important;
    color: #075985;
}
.badge.bg-primary {
    background: #E6F8F9 !important;
    color: #0A7D85;
}

/* ==============================
   KPI CARDS
   ============================== */
.kpi-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
}
.kpi-card .kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.kpi-card .kpi-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.kpi-card .kpi-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
}
.kpi-card .kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-card .kpi-icon i {
    font-size: 18px;
    color: var(--text-primary);
}

/* ==============================
   NAV CARDS (dashboard navigation)
   ============================== */
.nav-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    transition: all 0.2s ease;
    overflow: hidden;
}
.nav-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0,0,0,0.08);
}

/* ==============================
   TABS / FILTROS
   ============================== */
.tab-filter-container {
    display: inline-flex;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    padding: 4px;
    gap: 2px;
}
.tab-filter-item {
    height: 40px;
    padding: 0 20px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.tab-filter-item.active {
    background: var(--bg-card);
    color: var(--brand);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Nav tabs Bootstrap overrides */
.nav-tabs {
    border-bottom: 1px solid var(--border-subtle);
    gap: 0;
}
.nav-tabs .nav-link {
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    padding: var(--space-2) var(--space-3);
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--text-primary); }
.nav-tabs .nav-link.active {
    color: var(--brand);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid var(--brand);
    background: transparent;
}

/* ==============================
   PAGE HEADER
   ============================== */
.page-header {
    margin-bottom: var(--space-5);
}
.page-header h1 {
    margin-bottom: 2px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ==============================
   BREADCRUMBS
   ============================== */
.breadcrumb {
    margin-bottom: var(--space-3);
}
.breadcrumb-item {
    font-size: 13px;
}
.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--text-primary); }
.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

/* ==============================
   SECTION HEADER (old - kept for backward compatibility)
   ============================== */

/* ==============================
   EMPTY STATE
   ============================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}
.empty-state .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}

/* ==============================
   MODAL
   ============================== */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-4) var(--space-4) var(--space-3);
}
.modal-body {
    padding: var(--space-4);
}
.modal-footer {
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-4);
}

/* ==============================
   DROPDOWN
   ============================== */
.dropdown-menu {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    font-size: 14px;
}
.dropdown-item {
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}
.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dropdown-divider {
    border-top: 1px solid var(--border-subtle);
    margin: 4px 0;
    opacity: 1;
}

/* ==============================
   USER DROPDOWN TRIGGER
   ============================== */
.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    transition: background 0.15s;
}
.user-dropdown-trigger:hover {
    background: var(--bg-hover);
}
.user-dropdown-trigger .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 1px solid var(--border-subtle);
}
.user-dropdown-trigger .user-info {
    line-height: 1.3;
}
.user-dropdown-trigger .user-name {
    font-size: 14px;
    font-weight: 500;
}
.user-dropdown-trigger .user-role {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ==============================
   LOGIN / AUTH
   ============================== */
.contenedor-full { width: 100%; }
.contenedor-full .cabecera {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    height: 64px;
}
.contenedor-full .contenido {
    width: 100%;
    padding: 0;
    min-height: calc(100vh - 64px);
}
.contenedor-full .centro-auth {
    min-height: calc(100vh - 64px);
}

.login-form-container {
    max-width: 400px;
    margin: 0 auto;
}
.login-brand { margin-bottom: var(--space-6); }
.login-brand img { height: 32px; }
.login-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-1);
}
.login-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

/* ==============================
   ALERT CARDS
   ============================== */
.alert-card {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-subtle);
}

/* ==============================
   DOCUMENT LIST
   ============================== */
.document-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    transition: background 0.15s;
}
.document-item:hover { background: var(--bg-hover); }

/* ==============================
   PROFILE HEADER
   ============================== */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
}
.profile-name { font-size: 24px; font-weight: 600; }
.profile-role { font-size: 14px; color: var(--text-secondary); }

/* ==============================
   PROGRESS BAR
   ============================== */
.progress {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
}
.progress-bar {
    border-radius: var(--radius-full);
    background: var(--brand);
}

/* ==============================
   SCROLLBAR
   ============================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ==============================
   SWEETALERT2
   ============================== */
.swal2-popup {
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
}
.swal2-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
.swal2-confirm {
    background: var(--brand) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.swal2-cancel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* ==============================
   MISC - UTILITIES
   ============================== */
.link {
    color: var(--brand);
    text-decoration: none;
}
.link:hover {
    color: var(--brand-hover);
}
.table-link {
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}
.table-link:hover {
    color: var(--brand);
}

.draganddrop {
    border: 2px dashed #D1D5DB;
    border-radius: var(--radius-md);
    padding: 50px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-subtle);
    transition: border-color 0.2s;
}
.draganddrop:hover {
    border-color: var(--text-tertiary);
}

/* Sector / Stadium */
.sector-container { overflow: auto; }
.sector-row {
    display: flex;
    gap: 2rem;
    height: 35px;
    margin: 0.5rem 0;
}
.sector-row-content {
    display: flex;
    gap: 0.3rem;
}
.sector-row-content div {
    border: 1px solid;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Accordion */
.accordion-item {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    margin-bottom: 4px;
}
.accordion-button {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

/* Reservations */
.reservation {
    border-left: 3px solid transparent;
    background: rgba(0,0,0,0.02);
}
.reservation-success { border-left-color: #22C55E; }
.reservation-free { border-left-color: #EF4444; }
.reservation-pending { border-left-color: #6B7280; }
.reservation-manual { border-left-color: #F59E0B; }
.reservation-transfer { border-left-color: #F97316; }
.reservation-bizum { border-left-color: #06B6D4; }

/* Day selectors */
.dia { text-align: center; width: 12%; }
.dia .form-check-input { display: none !important; }
.dia label {
    display: inline-block;
    padding: 8px;
    width: 100%;
    cursor: pointer;
    border-radius: var(--radius-md);
}
.dia.checked label {
    background: var(--brand);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
}

/* Phone input */
.PhoneInput {
    height: 48px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    padding: 0 16px;
    display: flex;
    align-items: center;
}
.PhoneInputInput {
    border: none !important;
    background: transparent;
    font-size: 14px;
}
.PhoneInputInput:focus { outline: none; }

/* Rich text editor */
.rdw-editor-main {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    min-height: 200px;
    background: var(--bg-subtle);
}

/* Date range picker */
.react-daterange-picker__wrapper {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px;
    background: var(--bg-subtle);
    height: 48px;
}

/* rc-slider */
.rc-slider-handle {
    border: 2px solid var(--brand) !important;
    background: var(--bg-card) !important;
    opacity: 1 !important;
}
.rc-slider-track {
    background: var(--brand) !important;
}
.rc-slider-rail {
    background: var(--bg-subtle) !important;
}

/* Bootstrap badge override */
.badge.position-absolute {
    position: absolute;
}

/* ==============================
   SUBMENU
   ============================== */
.submenu .nav {
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-1);
}
.submenu .nav-item a {
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    font-size: 14px;
    font-weight: 500;
    border: none;
}
.submenu .nav-item a:hover { color: var(--text-primary); }
.submenu .nav-item a.active {
    color: var(--brand);
    font-weight: 600;
    border-bottom: 2px solid var(--brand);
}

/* ==============================
   SUBMENU STYLES (marketplace)
   ============================== */
.submenu-styles .nav {
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-1);
}
.submenu-styles .nav-item a {
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    font-size: 14px;
    font-weight: 500;
    border: none;
}
.submenu-styles .nav-item a:hover { color: var(--text-primary); }
.submenu-styles .nav-item a.active {
    color: var(--brand);
    font-weight: 600;
    border-bottom: 2px solid var(--brand);
}

/* ==============================
   FORMULARIO CLASS
   ============================== */
.formulario .row { margin-bottom: var(--space-3); }

/* ==============================
   SD- CUSTOM FORM CLASSES
   ============================== */
.sd-input { }
.sd-passwordview { position: relative; }
.sd-passwordview .sd-imageneye {
    position: absolute;
    right: 14px;
    top: 38px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.15s;
}
.sd-passwordview .sd-imageneye:hover { opacity: 0.6; }
.password-list { display: block; }

.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }

.noBold { font-weight: 400; }

.sd-label { }
.sd-label-dashboard {
    display: block;
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.sd-label-userdashboard {
    font-weight: 600;
    font-size: 16px;
}

.indicator-label { font-size: 12px; color: var(--text-secondary); }

/* ==============================
   KPI ICON COLORS
   ============================== */
.kpi-icon.teal { background: #E6F8F9; color: #0FABB5; }
.kpi-icon.teal i { color: #0FABB5; }
.kpi-icon.yellow { background: #F9FCDB; color: #8B9A00; }
.kpi-icon.yellow i { color: #8B9A00; }
.kpi-icon.navy { background: #E8EDF3; color: #1B3A5C; }
.kpi-icon.navy i { color: #1B3A5C; }
.kpi-icon.green { background: #DCFCE7; color: #166534; }
.kpi-icon.green i { color: #166534; }
.kpi-icon.red { background: #FEE2E2; color: #991B1B; }
.kpi-icon.red i { color: #991B1B; }
.kpi-icon.orange { background: #FEF3C7; color: #92400E; }
.kpi-icon.orange i { color: #92400E; }
.kpi-icon.blue { background: #E0F2FE; color: #075985; }
.kpi-icon.blue i { color: #075985; }

/* ==============================
   CUSTOM FILE INPUT
   ============================== */
.custom-file-input {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.custom-file-input input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
}

.avatar-cuadrado { border-radius: var(--radius-md); }
.bannerclub { border-radius: var(--radius-md); width: 100%; max-height: 300px; object-fit: cover; }

/* ==============================
   FORM CONTROL SOLID
   ============================== */
.form-control-solid {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
}
.form-control-solid:focus {
    background: var(--bg-card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15,171,181,0.12);
}

/* ==============================
   VERIFY / DOCUMENT
   ============================== */
.verify {
    background: #DCFCE7;
    color: #166534;
    border-radius: var(--radius-full);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}
.document {
    background: var(--bg-subtle);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* ==============================
   PISTA / CANCHA
   ============================== */
.pista {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.pistas { list-style: none; padding: 0; }
.dato-reserva {
    font-size: 13px;
    color: var(--text-secondary);
}
.color-sample {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid var(--border-subtle);
}
.colors { display: flex; gap: 8px; align-items: center; }

/* ==============================
   CART ITEMS
   ============================== */
.cart-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.cart-item .club { font-weight: 600; font-size: 15px; }
.cart-item .data { margin: var(--space-1) 0; }
.cart-item .icons { display: flex; gap: 8px; }

/* ==============================
   GROUP PRICE
   ============================== */
.group-price {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}
.group-price .price { font-weight: 600; font-size: 16px; }

/* ==============================
   ICONO MONEY / PAGOS
   ============================== */
.icono-money {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-pagos-manuales {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    padding: 4px 14px;
    font-size: 12px;
    height: auto;
    border: none;
}

/* ==============================
   IMG OPINION
   ============================== */
.img-opinion {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--bg-card);
}

/* ==============================
   CAROUSEL CLUB
   ============================== */
.carouselClub {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ==============================
   ACTIVITIES FEATURED
   ============================== */
.activitiesFeatured {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-3) 0;
}

/* ==============================
   STADIUM IMAGE
   ============================== */
.stadium-image {
    border-radius: var(--radius-lg);
    max-width: 100%;
    border: 1px solid var(--border-card);
}

/* ==============================
   SHOW SCHEDULE / GROUP SELECT
   ============================== */
.show-schedule {
    cursor: pointer;
    color: var(--brand);
    font-size: 13px;
}
.group-select {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
}

/* ==============================
   FONT SINGLE (section titles)
   ============================== */
.font-single {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ==============================
   FORM SPECIAL
   ============================== */
.form-special {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

/* ==============================
   MENU PUNTOS (actions popover)
   ============================== */
.menu-puntos .dropdown-item {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.menu-puntos .dropdown-item img { width: 14px; opacity: 0.4; }
.menu-puntos .tooltip-inner {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    max-width: none;
    padding: 6px;
}
.menu-puntos .tooltip-arrow { display: none; }

/* ==============================
   ROTATE HORIZONTAL (sidebar toggle)
   ============================== */
.rotate-horizontal { transform: rotate(180deg); }

/* ==============================
   MEMBER SELECT
   ============================== */
.member-select {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: border-color 0.15s;
}
.member-select:hover { border-color: var(--text-tertiary); }

/* ==============================
   PASS TEMPLATE
   ============================== */
.pass-template {
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background: var(--bg-subtle);
}

/* ==============================
   SERVICE INVERSE
   ============================== */
.serviceInverse {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    padding: 2px 12px;
    font-size: 12px;
    display: inline-block;
}

/* ==============================
   SCHEDULE CONFLICT
   ============================== */
.scheduleConflict {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    color: #991B1B;
}

/* ==============================
   ERROR (SepaLogs)
   ============================== */
.error {
    padding: var(--space-3);
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    color: #991B1B;
    font-size: 13px;
}

/* ==============================
   SECTOR MAP ACTION CLASSES
   ============================== */
.action { cursor: pointer; }
.available { background: #DCFCE7; border-color: #22C55E; color: #166534; }
.unavailable { background: #FEE2E2; border-color: #EF4444; color: #991B1B; color: #991B1B; }
.unclicable { pointer-events: none; opacity: 0.4; }
.sector-row-content .selected { background: var(--brand); color: var(--text-inverse); border-color: var(--brand); }
.sector-row-content .empty { border-color: transparent; }

/* ==============================
   LINK OSCURO / LINK CLUB
   ============================== */
.link-oscuro {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}
.link-oscuro:hover { color: var(--brand); }
.linkclub {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.linkclub:hover { text-decoration: underline; }

/* ==============================
   MARKETPLACE COLUMNAS
   ============================== */
.columna1 {
    background: var(--bg-card);
    border-right: 1px solid var(--border-subtle);
}
.columna2 {
    padding: var(--space-5);
}
.superior-home { margin: auto; display: flex; flex-direction: column; }
.dataclub { font-size: 14px; color: var(--text-secondary); }
.sports { display: flex; gap: 6px; flex-wrap: wrap; }

/* ==============================
   MARKET / MARKET-BORDER
   ============================== */
.market { padding: var(--space-5); }
.market-border {
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    padding: var(--space-5);
}

/* ==============================
   MARKETPLACE FIRST VIEW
   ============================== */
.firstView {
    background: linear-gradient(135deg, #1B3A5C 0%, #0FABB5 100%);
    min-height: calc(100vh - 85px);
    padding: 120px 30px 160px 30px;
    position: relative;
    width: 100%;
    z-index: 0;
}
.font-generic { font-family: var(--font) !important; }
.clubsMoreVisited {
    border-bottom: 1px solid var(--border-subtle);
    padding: 20px 0;
}
.clubsMoreVisited:last-child { border: none; }

/* ==============================
   DISPLAY-7 (legal pages)
   ============================== */
.display-7 { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; }

/* ==============================
   IMG-FLOAT
   ============================== */
.img-float {
    float: right;
    max-width: 200px;
    margin-left: var(--space-4);
    border-radius: var(--radius-md);
}

/* ==============================
   CARD GRADIENT / ESPECIAL
   ============================== */
.card-gradient {
    background: linear-gradient(135deg, #1B3A5C 0%, #0FABB5 100%);
    color: white;
}
.especial {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

/* ==============================
   BANNER CLUB (Basicdata)
   ============================== */
.bannerclub { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--radius-md); }
.config-carousel {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-card);
}

/* ==============================
   IMAGE MINIATURA (cards)
   ============================== */
.miniatura .image {
    width: 100%;
    height: 175px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.price { font-weight: 600; color: var(--brand); }

/* ==============================
   W-100 ADJUSTMENTS
   ============================== */
.w-100 { width: 100%; }

/* ==============================
   BUTTONS - additional
   ============================== */
.btn-120 { width: 120px; min-width: 120px; }
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    height: 48px;
    padding: 0 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
.btn-outline:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
}
.btn-outline-primary-custom {
    background: transparent;
    border: 1px solid var(--brand);
    color: var(--brand);
}

/* ==============================
   IMG EMPTY
   ============================== */
.img-empty {
    opacity: 0.2;
    max-width: 120px;
}

/* ==============================
   CART BADGE
   ============================== */
.cart {
    position: relative;
}
.cart .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==============================
   HAS-CONTENT (form labels)
   ============================== */
.has-content ~ .form-label,
.form-control:focus ~ .form-label {
    top: -6px;
    left: 12px;
    font-size: 11px;
    background: var(--bg-subtle);
    padding: 0 4px;
    color: var(--text-tertiary);
}
.form-control:focus ~ .form-label {
    background: var(--bg-card);
}

/* ==============================
   NEW BUTTON (header)
   ============================== */
.new {
    background: var(--brand);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition: background 0.15s;
}
.new:hover {
    background: var(--brand-hover);
    color: var(--text-inverse);
}

/* ==============================
   VIDEO BACKGROUND
   ============================== */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    z-index: -1;
}

/* ==============================
   MODAL ROUNDED / XS
   ============================== */
.modal-rounded { border-radius: var(--radius-lg) !important; }
.modal-xs { max-width: 360px; }

/* ==============================
   PADDING/MARGIN CUSTOM
   ============================== */
.ml-5 { margin-left: 48px; }
.ml-4 { margin-left: 32px; }
.ml-3 { margin-left: 24px; }
.ml-2 { margin-left: 16px; }
.ml-1 { margin-left: 8px; }

/* ==============================
   WELCOME BANNER
   ============================== */
.welcome-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--brand) 100%);
    border-radius: var(--radius-xl);
    padding: 32px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    color: white;
    position: relative;
    overflow: hidden;
}
.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
}
.welcome-banner::after {
    content: '';
    position: absolute;
    bottom: -60%;
    right: 5%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
}
.welcome-content {
    position: relative;
    z-index: 1;
}
.welcome-label {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 400;
    display: block;
    margin-bottom: 4px;
}
.welcome-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}
.welcome-subtitle {
    font-size: 15px;
    opacity: 0.75;
    margin: 0;
    font-weight: 400;
}
.welcome-icon {
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* ==============================
   SECTION TITLE
   ============================== */
.section-title {
    margin-bottom: var(--space-3);
}
.section-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* ==============================
   NAV CARD ACTION (list-style navigation)
   ============================== */
.nav-card-action {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.nav-card-action:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.nav-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.nav-card-icon.teal {
    background: var(--brand-light);
    color: var(--brand);
}
.nav-card-icon.navy {
    background: var(--navy-light);
    color: var(--navy);
}
.nav-card-icon.green {
    background: #DCFCE7;
    color: #166534;
}
.nav-card-icon.orange {
    background: #FEF3C7;
    color: #92400E;
}
.nav-card-icon.blue {
    background: #E0F2FE;
    color: #075985;
}
.nav-card-icon.red {
    background: #FEE2E2;
    color: #991B1B;
}
.nav-card-info {
    flex: 1;
    min-width: 0;
}
.nav-card-info h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.nav-card-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0 0;
}
.nav-card-arrow {
    color: var(--text-tertiary);
    font-size: 14px;
    flex-shrink: 0;
}

/* ==============================
   CLUB CARD (lobby/client)
   ============================== */
.club-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.club-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand);
    transform: translateY(-2px);
}
.club-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.club-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
}
.club-card-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.club-card-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.club-card-badge {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    transition: all 0.2s;
}
.club-card:hover .club-card-badge {
    background: var(--brand);
    color: white;
}

/* ==============================
   KPI CARD LINK
   ============================== */
.kpi-card-link {
    cursor: pointer;
    transition: all 0.2s ease;
}
.kpi-card-link:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand);
}

/* ==============================
   CONFIG CARD
   ============================== */
.config-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    padding: 32px;
}
.config-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.config-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--brand-light);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.config-card-icon.navy {
    background: var(--navy-light);
    color: var(--navy);
}
.config-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.config-card-header p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0 0;
}
.config-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 28px 0;
}
.config-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}
.btn-save {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.password-requirements {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 16px 0;
}

/* ==============================
   SECTION HEADER (with share btn)
   ============================== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--border-subtle);
}
.section-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.btn-share {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-share:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
}

/* ==============================
   ACTIVITY DESCRIPTION
   ============================== */
.activity-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}
.activity-description h1,
.activity-description h2,
.activity-description h3 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

/* ==============================
   GROUP DETAIL CARD (Description tab)
   ============================== */
.groups-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.group-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.group-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.group-detail-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.group-detail-age {
    font-size: 13px;
    color: var(--text-secondary);
}
.group-detail-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand);
}
.group-detail-rows {
    padding: 4px 0;
}
.group-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-subtle);
}
.group-detail-row:last-child {
    border-bottom: none;
}
.group-detail-row.total {
    background: var(--bg-subtle);
    padding: 16px 24px;
}
.group-detail-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.group-detail-value {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: right;
}
.group-detail-value.price {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 16px;
}
.group-detail-count {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-left: 6px;
}
.group-detail-badge {
    display: inline-flex;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-subtle);
    color: var(--text-secondary);
}
.group-detail-badge.active {
    background: #DCFCE7;
    color: #166534;
}

/* ==============================
   GROUP ENROLL CARD (Group tab)
   ============================== */
.group-enroll-section {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 28px 32px;
    margin-bottom: var(--space-4);
}
.group-enroll-section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--space-3);
}
.group-enroll-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.group-enroll-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.group-enroll-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-subtle);
}
.group-enroll-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.group-enroll-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-light);
    padding: 8px 20px;
    border-radius: var(--radius-md);
}
.group-enroll-rows {
    padding: 4px 0;
}
.group-enroll-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border-subtle);
}
.group-enroll-row:last-child {
    border-bottom: none;
}
.group-enroll-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.group-enroll-value {
    font-size: 14px;
    color: var(--text-secondary);
}
.group-enroll-action {
    padding: 20px 28px;
    border-top: 1px solid var(--border-subtle);
}
.btn-enroll {
    width: 100%;
    height: 52px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ==============================
   CLIENT DATA CARD
   ============================== */
.section-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.client-data-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 4px 0;
}
.client-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.client-data-row:last-child {
    border-bottom: none;
}
.client-data-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.client-data-value {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==============================
   EMPTY STATE CARD
   ============================== */
.empty-state-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
}
.empty-state-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.empty-state-card p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.empty-state-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}

/* ==============================
   SCHEDULE ROW (modal)
   ============================== */
.schedule-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.schedule-row:last-child {
    border-bottom: none;
}
.schedule-day {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.schedule-hours {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.schedule-hour-badge {
    background: var(--brand-light);
    color: var(--brand-dark);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
}

/* ==============================
   LIST PAGE SECTION HEADER
   ============================== */
.list-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.list-section-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
.list-section-header-actions {
    display: flex;
    gap: 8px;
}
.card .hr-divider {
    height: 1px;
    background: var(--border-subtle);
    border: none;
    margin: var(--space-3) 0;
}

/* ==============================
   TABLE IMAGE COLUMN
   ============================== */
.imagen {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==============================
   ACTION ICONS (table rows)
   ============================== */
.action-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.action-icons a,
.action-icons .cursor {
    color: var(--text-secondary);
    font-size: 15px;
    transition: color 0.15s;
    text-decoration: none;
    cursor: pointer;
}
.action-icons a:hover,
.action-icons .cursor:hover {
    color: var(--brand);
}

/* ==============================
   MODAL OVERRIDES
   ============================== */
.modal-content {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-lg) !important;
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 20px 24px !important;
}
.modal-header .btn-close {
    padding: 8px;
    margin: -4px -4px -4px auto;
}
.modal-body {
    padding: 24px !important;
}
.modal-footer {
    border-top: 1px solid var(--border-subtle) !important;
    padding: 16px 24px !important;
}

/* ==============================
   FORM SWITCH (toggle)
   ============================== */
.form-switch .form-check-input {
    width: 38px !important;
    height: 20px !important;
    border-radius: var(--radius-full) !important;
    background-color: #D1D5DB !important;
    border-color: transparent !important;
    cursor: pointer;
    transition: background-color 0.2s;
}
.form-switch .form-check-input:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* ==============================
   DATA TABLE CARD HEADER
   ============================== */
.data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.data-card-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
.data-card-divider {
    height: 1px;
    background: var(--border-subtle);
    border: none;
    margin: 0 0 var(--space-4) 0;
}

/* ==============================
   ACTION BUTTONS (inline in table)
   ============================== */
.table-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    transition: all 0.15s;
    cursor: pointer;
    text-decoration: none;
}
.table-action-btn:hover {
    background: var(--bg-subtle);
    color: var(--brand);
}

/* ==============================
   CLIENT DATA ROW (inscriptions expanded)
   ============================== */
.client-data-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
}
.client-data-row:last-child {
    border-bottom: none;
}
.client-data-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.client-data-value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}