/*
 * Archivo: playpadel-theme.css
 * Modulo: Identidad visual
 *
 * Responsabilidad:
 * - Centralizar los tokens visuales oficiales de PlayPadel.
 * - Mapear la identidad de marca al sistema nativo Light/Dark de Modernize.
 * - Exponer variables semanticas para componentes presentes y futuros.
 *
 * No debe:
 * - Reemplazar reglas de componentes especificos sin necesidad.
 * - Duplicar colores hardcodeados por pantalla.
 * - Alterar logica de reservas, pagos, usuarios o multi-tenant.
 */

:root {
    --pp-primary: #0A8978;
    --pp-primary-rgb: 10, 137, 120;
    --pp-primary-hover: #087365;
    --pp-secondary: #A0E337;
    --pp-secondary-rgb: 160, 227, 55;
    --pp-secondary-hover: #8CC92F;
    --pp-accent: #A0E337;
    --pp-accent-rgb: 160, 227, 55;
    --pp-background: #FFFFFF;
    --pp-background-secondary: #E5F6F2;
    --pp-surface: #FFFFFF;
    --pp-surface-hover: #F4FBF9;
    --pp-text-primary: #0F172A;
    --pp-text-secondary: #475569;
    --pp-text-muted: #64748B;
    --pp-border: #B1BFCE;
    --pp-border-soft: rgba(177, 191, 206, 0.45);
    --pp-focus-ring: rgba(10, 137, 120, 0.24);
    --pp-on-primary: #FFFFFF;
    --pp-on-accent: #0F172A;
}

:root[data-bs-theme="light"][data-color-theme="PlayPadel_Theme"],
:root[data-bs-theme="light"] {
    --bs-primary: var(--pp-primary);
    --bs-primary-rgb: var(--pp-primary-rgb);
    --bs-primary-bg-subtle: var(--pp-background-secondary);
    --bs-secondary: var(--pp-secondary);
    --bs-secondary-rgb: var(--pp-secondary-rgb);
    --bs-secondary-bg-subtle: rgba(var(--pp-secondary-rgb), 0.18);
    --bs-body-bg: var(--pp-background);
    --bs-body-color: var(--pp-text-primary);
    --bs-border-color: var(--pp-border-soft);
    --bs-link-color: var(--pp-primary);
    --bs-link-hover-color: var(--pp-primary-hover);
    --bs-card-bg: var(--pp-surface);
    --bs-card-title-color: var(--pp-text-primary);
    --bs-emphasis-color: var(--pp-text-primary);
    --bs-tertiary-bg: var(--pp-background-secondary);
}

:root[data-bs-theme="dark"] {
    --pp-primary: #9EDC1A;
    --pp-primary-rgb: 158, 220, 26;
    --pp-primary-hover: #B5F13A;
    --pp-secondary: #66C300;
    --pp-secondary-rgb: 102, 195, 0;
    --pp-secondary-hover: #80D91C;
    --pp-accent: #C6FF00;
    --pp-accent-rgb: 198, 255, 0;
    --pp-background: #0D1117;
    --pp-background-secondary: #11161F;
    --pp-surface: #161D27;
    --pp-surface-hover: #1B2532;
    --pp-text-primary: #FFFFFF;
    --pp-text-secondary: #D1D5DB;
    --pp-text-muted: #9CA3AF;
    --pp-border: #595D67;
    --pp-border-soft: rgba(89, 93, 103, 0.46);
    --pp-focus-ring: rgba(158, 220, 26, 0.24);
    --pp-on-primary: #0D1117;
    --pp-on-accent: #0D1117;

    --bs-primary: var(--pp-primary);
    --bs-primary-rgb: var(--pp-primary-rgb);
    --bs-primary-bg-subtle: rgba(var(--pp-primary-rgb), 0.16);
    --bs-secondary: var(--pp-secondary);
    --bs-secondary-rgb: var(--pp-secondary-rgb);
    --bs-secondary-bg-subtle: rgba(var(--pp-secondary-rgb), 0.16);
    --bs-body-bg: var(--pp-background);
    --bs-body-color: var(--pp-text-primary);
    --bs-border-color: var(--pp-border-soft);
    --bs-link-color: var(--pp-primary);
    --bs-link-hover-color: var(--pp-secondary-hover);
    --bs-card-bg: var(--pp-surface);
    --bs-card-title-color: var(--pp-text-primary);
    --bs-emphasis-color: var(--pp-text-primary);
    --bs-tertiary-bg: var(--pp-background-secondary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] body,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .page-wrapper,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .body-wrapper {
    background-color: var(--pp-background);
}

.playpadel-skip-link {
    position: fixed;
    left: 16px;
    top: 12px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--pp-text-primary);
    color: var(--pp-background);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-140%);
    transition: transform 0.16s ease;
}

.playpadel-skip-link:focus {
    color: var(--pp-background);
    transform: translateY(0);
}

.playpadel-public-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--pp-border-soft);
    background: color-mix(in srgb, var(--pp-surface) 92%, transparent);
    backdrop-filter: blur(14px);
}

.playpadel-public-navbar {
    background: transparent;
}

.playpadel-public-header .logo-img {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.playpadel-public-header .nav-link,
.playpadel-public-header .text-dark,
.offcanvas .text-dark {
    color: var(--pp-text-secondary) !important;
}

.playpadel-public-header .nav-link:hover,
.playpadel-public-header .nav-link:focus,
.offcanvas .link-primary:hover,
.offcanvas .link-primary:focus {
    color: var(--pp-primary) !important;
}

.playpadel-theme-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--pp-border-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-surface) 86%, transparent);
}

.playpadel-theme-toggle-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--pp-text-secondary);
    text-decoration: none;
}

.playpadel-theme-toggle-btn:hover,
.playpadel-theme-toggle-btn:focus {
    background: rgba(var(--pp-primary-rgb), 0.12);
    color: var(--pp-primary);
}

.playpadel-theme-toggle-btn i {
    font-size: 18px;
}

.playpadel-theme-toggle-mobile {
    width: 100%;
    justify-content: center;
}

[data-bs-theme="light"] .playpadel-theme-toggle .light-layout,
[data-bs-theme="dark"] .playpadel-theme-toggle .dark-layout {
    background: var(--pp-primary);
    color: var(--pp-on-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .left-sidebar,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .topbar,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .navbar,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .offcanvas,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .modal-content {
    background-color: var(--pp-background);
    border-color: var(--pp-border-soft);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .card,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .customizer,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .turnos-home-plan {
    background-color: var(--pp-surface);
    border-color: var(--pp-border-soft);
    box-shadow: none;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .bg-info-subtle {
    background-color: #22304B !important;
    border: 1px solid rgba(158, 220, 26, 0.08);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .sidebar-link {
    color: #8EA4C2;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .sidebar-link:hover,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .sidebar-link.active {
    background-color: rgba(var(--pp-primary-rgb), 0.12);
    color: var(--pp-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .nav-small-cap,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .nav-link,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .text-primary {
    color: var(--pp-primary) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .fixed-profile {
    background-color: rgba(var(--pp-primary-rgb), 0.1) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .form-control,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .form-select {
    background-color: #202A38;
    border-color: var(--pp-border-soft);
    color: var(--pp-text-primary);
    color-scheme: dark;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .form-control::placeholder {
    color: var(--pp-text-muted);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .form-control::-webkit-calendar-picker-indicator {
    opacity: 0.72;
    filter: invert(1) brightness(140%);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .content-dd,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu-nav {
    background-color: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    color: var(--pp-text-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu .dropdown-item,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .message-body a,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .profile-dropdown a,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu h5,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu h6 {
    color: var(--pp-text-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu .dropdown-item:hover,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu .dropdown-item:focus,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .message-body a:hover,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .message-body a:focus,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .bg-hover-primary:hover {
    background-color: rgba(var(--pp-primary-rgb), 0.12);
    color: var(--pp-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .text-body-secondary,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .text-muted,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dropdown-menu span:not(.badge),
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .profile-dropdown span {
    color: var(--pp-text-muted) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .text-bg-light {
    background-color: var(--pp-background-secondary) !important;
    color: var(--pp-primary) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .modal-content,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .offcanvas,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .customizer {
    background-color: var(--pp-surface);
    color: var(--pp-text-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .modal-header,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .modal-footer,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .offcanvas-header,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .border-bottom,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .border-start {
    border-color: var(--pp-border-soft) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .modal-title,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .offcanvas-title,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .customizer h4,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .customizer h6 {
    color: var(--pp-text-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .btn-close {
    --bs-btn-close-color: var(--pp-text-primary);
    --bs-btn-close-opacity: 0.72;
    --bs-btn-close-hover-opacity: 1;
    filter: invert(1) grayscale(100%) brightness(180%);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .alert-info {
    background-color: rgba(var(--pp-primary-rgb), 0.12);
    border-color: rgba(var(--pp-primary-rgb), 0.28);
    color: var(--pp-text-secondary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .alert-success {
    background-color: rgba(102, 195, 0, 0.14);
    border-color: rgba(102, 195, 0, 0.32);
    color: var(--pp-text-secondary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .alert-danger {
    background-color: rgba(250, 137, 107, 0.12);
    border-color: rgba(250, 137, 107, 0.3);
    color: var(--pp-text-secondary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .bg-primary-subtle,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .text-bg-primary {
    background-color: rgba(var(--pp-primary-rgb), 0.16) !important;
    color: var(--pp-primary) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .bg-success-subtle {
    background-color: rgba(102, 195, 0, 0.14) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .bg-secondary-subtle {
    background-color: rgba(89, 93, 103, 0.22) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .text-secondary {
    color: var(--pp-text-muted) !important;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dt-button-info,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dt-button-collection,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker-dropdown {
    background-color: var(--pp-surface);
    border-color: var(--pp-border-soft);
    color: var(--pp-text-secondary);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker table tr td,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker table tr th,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker .datepicker-switch,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker .prev,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker .next {
    color: var(--pp-text-secondary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker table tr td.day:hover,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker table tr td.focused,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker .datepicker-switch:hover,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker .prev:hover,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker .next:hover {
    background-color: rgba(var(--pp-primary-rgb), 0.12);
    color: var(--pp-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker table tr td.active,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .datepicker table tr td.active:hover {
    background-color: var(--pp-primary);
    color: var(--pp-on-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .table,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] table.dataTable {
    --bs-table-bg: transparent;
    --bs-table-color: var(--pp-text-secondary);
    --bs-table-border-color: var(--pp-border-soft);
    color: var(--pp-text-secondary);
    border-color: var(--pp-border-soft);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] table.dataTable thead th,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] table.dataTable.turnos-tabla-gestion thead th {
    background-color: #151C26;
    border-color: var(--pp-border-soft);
    color: #AFC0D7;
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] table.dataTable tbody td,
:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] table.dataTable.turnos-tabla-gestion tbody td {
    background-color: transparent;
    border-color: var(--pp-border-soft);
    color: var(--pp-text-secondary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .dataTables_wrapper .dataTables_filter input {
    background-color: #202A38;
    border-color: var(--pp-border-soft);
    color: var(--pp-text-primary);
}

:root[data-color-theme="PlayPadel_Theme"] .btn-primary {
    --bs-btn-bg: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-primary-hover);
    --bs-btn-hover-border-color: var(--pp-primary-hover);
    --bs-btn-active-bg: var(--pp-primary-hover);
    --bs-btn-active-border-color: var(--pp-primary-hover);
    --bs-btn-disabled-bg: var(--pp-primary);
    --bs-btn-disabled-border-color: var(--pp-primary);
    --bs-btn-color: var(--pp-on-primary);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-disabled-color: var(--pp-on-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .btn-primary {
    --bs-btn-color: var(--pp-on-primary);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
    --bs-btn-disabled-color: var(--pp-on-primary);
}

:root[data-color-theme="PlayPadel_Theme"] .btn-outline-primary {
    --bs-btn-color: var(--pp-primary);
    --bs-btn-border-color: rgba(var(--pp-primary-rgb), 0.42);
    --bs-btn-hover-bg: var(--pp-primary);
    --bs-btn-hover-border-color: var(--pp-primary);
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-bg: var(--pp-primary);
    --bs-btn-active-border-color: var(--pp-primary);
    --bs-btn-active-color: var(--pp-on-primary);
}

:root[data-bs-theme="dark"][data-color-theme="PlayPadel_Theme"] .btn-outline-primary {
    --bs-btn-hover-color: var(--pp-on-primary);
    --bs-btn-active-color: var(--pp-on-primary);
}

:root[data-color-theme="PlayPadel_Theme"] .form-control:focus,
:root[data-color-theme="PlayPadel_Theme"] .form-select:focus,
:root[data-color-theme="PlayPadel_Theme"] .form-check-input:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 0.25rem var(--pp-focus-ring);
}

:root[data-color-theme="PlayPadel_Theme"] .form-check-input:checked {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
}

.playpadel-logo-img {
    display: block;
    width: auto;
    max-width: 248px;
    height: auto;
    max-height: 48px;
    object-fit: contain;
}

.playpadel-isotipo-img {
    display: block;
    width: 42px;
    height: 28px;
    max-width: 42px;
    object-fit: contain;
    object-position: center;
}

.playpadel-logo-isotipo {
    display: none;
}

.left-sidebar .playpadel-logo-img {
    max-width: 224px;
    max-height: 48px;
}

.left-sidebar .logo-img {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.topbar .playpadel-logo-img,
.auth-customizer-none .playpadel-logo-img {
    max-width: 260px;
    max-height: 48px;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar .playpadel-logo-completo,
body.mini-sidebar .left-sidebar .playpadel-logo-completo {
    display: none;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .playpadel-logo-completo,
body.mini-sidebar .left-sidebar:hover .playpadel-logo-completo {
    display: inline-flex;
    align-items: center;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar .playpadel-logo-isotipo,
body.mini-sidebar .left-sidebar .playpadel-logo-isotipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 48px;
    transform: translateX(-2px);
}

body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .playpadel-logo-isotipo,
body.mini-sidebar .left-sidebar:hover .playpadel-logo-isotipo {
    display: none;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo,
body.mini-sidebar .left-sidebar .brand-logo {
    justify-content: center !important;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .brand-logo,
body.mini-sidebar .left-sidebar:hover .brand-logo {
    justify-content: space-between !important;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar .logo-img,
body.mini-sidebar .left-sidebar .logo-img {
    justify-content: center;
    width: 100%;
}

body[data-sidebartype="mini-sidebar"] .left-sidebar:hover .logo-img,
body.mini-sidebar .left-sidebar:hover .logo-img {
    justify-content: flex-start;
}