@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap'); /* ============================================ SportApp Modern — CSS Overlay v1 Warm minimalista palette ============================================ */ /* --- Design Tokens --- */ :root { --font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Barlow Condensed', system-ui, sans-serif; /* Surfaces */ --bg-primary: oklch(98.5% 0.004 28); --bg-secondary: oklch(94% 0.007 28); --bg-card: oklch(100% 0 0); /* Text */ --text-heading: oklch(17% 0.010 28); --text-primary: oklch(18.5% 0.011 28); --text-secondary: oklch(42% 0.015 28); --text-muted: oklch(62% 0.012 28); /* Accent — Coral (default) */ --accent: oklch(72.5% 0.11 28); --accent-hover: oklch(66% 0.12 28); --accent-active: oklch(61% 0.13 28); --accent-tint: oklch(88% 0.055 28); /* Status */ --success: oklch(65% 0.17 150); --error: oklch(55% 0.18 25); --warning: oklch(65% 0.17 55); --info: oklch(58% 0.17 250); --border-color: oklch(90% 0.008 28); --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-xl: 16px; --radius-pill: 9999px; /* Spacing — 4pt baseline */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 72px; --space-3xl: 112px; --shadow-sm: 0 1px 3px oklch(17% 0.010 28 / 0.06); --shadow-md: 0 8px 24px oklch(17% 0.010 28 / 0.08); --shadow-lg: 0 12px 36px oklch(17% 0.010 28 / 0.10); --shadow-xl: 0 24px 60px oklch(17% 0.010 28 / 0.14); } /* ============================================================ Themes — override accent + surface tokens via class. Default (Coral) lives in :root above. ============================================================ */ html.theme-ocean { --accent: oklch(58% 0.17 250); --accent-hover: oklch(53% 0.17 250); --accent-active: oklch(49% 0.17 250); --accent-tint: oklch(92% 0.04 250); --bg-primary: oklch(98% 0.004 250); --bg-secondary: oklch(96% 0.015 250); --border-color: oklch(90% 0.025 250); } html.theme-forest { --accent: oklch(65% 0.17 150); --accent-hover: oklch(57% 0.17 150); --accent-active: oklch(48% 0.17 150); --accent-tint: oklch(95% 0.07 150); --bg-primary: oklch(98.5% 0.004 150); --bg-secondary: oklch(97% 0.025 150); --border-color: oklch(93% 0.04 150); } html.theme-violet { --accent: oklch(55% 0.22 290); --accent-hover: oklch(49% 0.22 290); --accent-active: oklch(44% 0.22 290); --accent-tint: oklch(90% 0.08 290); --bg-primary: oklch(98.5% 0.005 290); --bg-secondary: oklch(95% 0.02 290); --border-color: oklch(88% 0.04 290); } html.theme-graphite { --accent: oklch(42% 0.015 270); --accent-hover: oklch(33% 0.015 270); --accent-active: oklch(23% 0.014 270); --accent-tint: oklch(94% 0.005 270); --bg-primary: oklch(98.5% 0 0); --bg-secondary: oklch(95% 0.004 270); --border-color: oklch(90% 0.006 270); } html.theme-amber { --accent: oklch(65% 0.17 55); --accent-hover: oklch(57% 0.17 55); --accent-active: oklch(50% 0.17 55); --accent-tint: oklch(94% 0.055 70); --bg-primary: oklch(99% 0.004 80); --bg-secondary: oklch(97% 0.025 80); --border-color: oklch(92% 0.07 80); } /* ============================================================ Dark Mode — html.dark flips surface/text tokens. Accent stays from whichever color theme is active. Accent-tint overrides keep hover states readable on dark bg. ============================================================ */ html.dark { color-scheme: dark; --bg-primary: oklch(14% 0.010 28); --bg-secondary: oklch(20% 0.010 28); --bg-card: oklch(22% 0.009 28); --text-heading: oklch(96% 0.005 28); --text-primary: oklch(93% 0.005 28); --text-secondary:oklch(78% 0.009 28); --text-muted: oklch(59% 0.009 28); --border-color: oklch(28% 0.010 28); --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.40); --shadow-md: 0 8px 24px oklch(0% 0 0 / 0.50); --shadow-lg: 0 12px 36px oklch(0% 0 0 / 0.60); /* Coral default tint — semi-transparent so it works on dark surfaces */ --accent-tint: oklch(72.5% 0.11 28 / 0.18); } html.dark.theme-ocean { --accent-tint: oklch(58% 0.17 250 / 0.18); } html.dark.theme-forest { --accent-tint: oklch(65% 0.17 150 / 0.18); } html.dark.theme-violet { --accent-tint: oklch(55% 0.22 290 / 0.18); } html.dark.theme-graphite { --accent-tint: oklch(42% 0.015 270 / 0.22); } html.dark.theme-amber { --accent-tint: oklch(65% 0.17 55 / 0.18); } /* Modal background — not covered by tokens in base CSS */ html.dark .modal-content { background-color: var(--bg-card); } /* Bootstrap dropdown menus hardcode white */ html.dark .dropdown-menu { background-color: var(--bg-card); border: 1px solid var(--border-color); } html.dark .dropdown-menu > li > a { color: var(--text-primary); } html.dark .dropdown-menu > li > a:hover { background-color: var(--accent-tint); color: var(--text-heading); } html.dark .dropdown-menu .divider { background-color: var(--border-color); } /* Bootstrap table striping hardcodes a light gray */ html.dark .table-striped > tbody > tr:nth-child(odd) > td, html.dark .table-striped > tbody > tr:nth-child(odd) > th { background-color: var(--bg-secondary) !important; } /* Bootstrap .well */ html.dark .well { background-color: var(--bg-secondary); border-color: var(--border-color); } /* AdminLTE user dropdown header gradient */ html.dark .main-header .navbar .dropdown-menu .user-footer { background: var(--bg-secondary); } /* ============================================================ Dark mode — Bootstrap .table / DataTable !important needed to beat inline style="background: white" on elements generated by JSP loops. ============================================================ */ html.dark .table > thead > tr > th, html.dark .table > thead > tr > td { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } html.dark .table > tbody > tr { background-color: var(--bg-card) !important; } html.dark .table > tbody > tr > td, html.dark .table > tbody > tr > th { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } html.dark .table > tfoot > tr > td, html.dark .table > tfoot > tr > th { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } html.dark .table-bordered { border-color: var(--border-color) !important; } html.dark .table > tbody > tr:hover > td, html.dark .table > tbody > tr:hover > th { background-color: var(--accent-tint) !important; color: var(--text-heading) !important; } /* DataTable controls */ html.dark .dataTables_wrapper .dataTables_filter input, html.dark .dataTables_wrapper .dataTables_length select { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } html.dark .dataTables_wrapper .dataTables_info, html.dark .dataTables_wrapper .dataTables_length label, html.dark .dataTables_wrapper .dataTables_filter label { color: var(--text-secondary) !important; } /* DataTable pagination */ html.dark .dataTables_paginate .paginate_button:not(.current) { color: var(--text-secondary) !important; } html.dark .dataTables_paginate .paginate_button:not(.current):hover { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-heading) !important; } html.dark .dataTables_paginate .paginate_button.current, html.dark .dataTables_paginate .paginate_button.current:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } /* --- Theme picker swatch buttons --- */ .sa-theme-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); cursor: pointer; padding: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); display: inline-block; } .sa-theme-btn:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); } /* --- Body & Base --- */ html, body { height: 100%; } body { font-family: var(--font-family); color: var(--text-primary); background-color: var(--bg-primary) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Force wrapper and sidebar to fill full viewport height */ .wrapper { min-height: 100vh !important; } .main-sidebar { min-height: 100vh !important; } /* Content area background */ .content-wrapper { background-color: var(--bg-primary); } /* --- Sidebar --- */ .main-sidebar { font-family: var(--font-family); } .sidebar-menu > li > a { padding: 12px 16px; border-left: 3px solid transparent; } .sidebar-menu > li.active > a { border-left-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 8%, transparent); } .sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .ion, .sidebar-menu > li > a > img { width: 20px; text-align: center; margin-right: 8px; opacity: 0.7; } .sidebar-menu > li.active > a > .fa, .sidebar-menu > li.active > a > .ion { color: var(--accent); opacity: 1; } .sidebar-menu .treeview-menu { padding-left: 0; } .sidebar-menu .treeview-menu > li > a { padding: 10px 16px 10px 44px; } .sidebar-menu .treeview-menu > li.active > a { color: var(--accent); } .sidebar-menu > li > a > .pull-right { margin-top: 2px; } /* Sidebar user panel */ .user-panel { padding: 20px; } .user-panel .info p { } /* Sidebar search — hidden */ .sidebar-form { display: none !important; } .sidebar-form .input-group .form-control { border-radius: var(--radius) !important; background: var(--bg-secondary); border-color: var(--border-color); } .sidebar-form .input-group-btn > .btn { border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg-secondary); } /* Sidebar header label */ .sidebar-menu .header { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 16px 8px; opacity: 0.5; } /* --- Header --- */ .main-header { background: color-mix(in srgb, var(--bg-primary) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: stretch; position: sticky; top: 0; z-index: 1030; } .main-header .logo { display: flex; align-items: center; justify-content: center; padding: 0 var(--space-sm); background: transparent; color: var(--text-heading) !important; border-bottom: 1px solid var(--border-color); /* Override AdminLTE's float + fixed height so flex-stretch takes over */ float: none !important; flex-shrink: 0; height: auto !important; } .main-header .logo .logo-lg { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text-heading); } .main-header .logo .logo-mini img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; display: block; /* Reset AdminLTE .user-image side-effects */ float: none !important; margin: 0 !important; vertical-align: unset; } .main-header .navbar { background: transparent; border-bottom: 1px solid var(--border-color); box-shadow: none; /* Override AdminLTE's margin-left: 230px (not needed with flexbox) */ flex: 1; margin-left: 0 !important; margin-bottom: 0; float: none !important; } .main-header .navbar .sidebar-toggle { padding: 14px 16px; color: var(--text-secondary); } .main-header .navbar .sidebar-toggle:hover { color: var(--accent); } /* Dropdown menus in header */ .main-header .navbar .dropdown-menu { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; } .main-header .navbar .dropdown-menu > li > a { border-radius: var(--radius-sm); padding: 8px 16px; color: var(--text-primary); } .main-header .navbar .dropdown-menu > li > a:hover { background-color: var(--accent-tint); color: var(--text-heading); } /* User dropdown header */ .main-header .navbar .dropdown-menu .user-header { background: var(--accent) !important; background-image: none !important; border-radius: var(--radius) var(--radius) 0 0; padding: 20px; text-align: center; } .main-header .navbar .dropdown-menu .user-header p { color: #fff !important; font-weight: 600; margin: 8px 0 0; } .main-header .navbar .dropdown-menu .user-header img { width: 64px; height: 64px; border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.2); } /* User dropdown footer — buttons row */ .main-header .navbar .dropdown-menu .user-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 0 0 var(--radius) var(--radius); } .main-header .navbar .dropdown-menu .user-footer .pull-left, .main-header .navbar .dropdown-menu .user-footer .pull-right { float: none !important; flex: 1; } .main-header .navbar .dropdown-menu .user-footer .btn { width: 100%; text-align: center; font-size: 13px; padding: 7px 12px; border-radius: var(--radius-sm); } /* "Perfil" — outlined style */ .main-header .navbar .dropdown-menu .user-footer .pull-left .btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); } .main-header .navbar .dropdown-menu .user-footer .pull-left .btn:hover { background: var(--bg-primary); border-color: var(--accent); color: var(--accent); } /* "Cerrar sesión" — filled accent style */ .main-header .navbar .dropdown-menu .user-footer .pull-right .btn { background: var(--accent); border: 1px solid var(--accent); color: #fff; } .main-header .navbar .dropdown-menu .user-footer .pull-right .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } /* Navbar custom menu items */ .navbar-custom-menu > .nav > li > a { padding: 10px 12px; color: var(--text-secondary); background: transparent; display: flex; align-items: center; gap: 6px; } /* Navbar user avatar (top-right dropdown trigger) */ .navbar-custom-menu .user-menu > a > img.user-image { width: 30px !important; height: 30px !important; border-radius: 50% !important; object-fit: cover !important; float: none !important; margin: 0 !important; border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); vertical-align: middle; } .navbar-custom-menu > .nav > li > a:hover { background: transparent; color: var(--accent); } /* --- Cards --- */ .box, .box-primary, .box-success, .box-warning, .box-danger, .box-info { border-top: none !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--bg-card); border: none; } .box-header { padding: var(--space-sm) var(--space-md) 0; border-bottom: none; } .box-header .box-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-heading); } .box-body { padding: var(--space-md); } .box-footer { padding: var(--space-sm) var(--space-md); background: transparent; border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .box-tools > .btn { border-radius: var(--radius-sm); } /* No-border variant cleanup */ .box.no-border { box-shadow: none; background: transparent; } /* --- Buttons --- */ .btn { border-radius: 6px; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 500; padding: 10px 20px; font-size: 16px; } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--accent); border-color: var(--accent); color: #fff; border-radius: var(--radius-pill) !important; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; } .btn-primary:hover, .btn-primary:focus { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; box-shadow: none; } .btn-primary:active { background-color: var(--accent-active) !important; border-color: var(--accent-active) !important; } .btn-success { background-color: transparent !important; border-color: var(--accent) !important; color: var(--accent) !important; } .btn-success:hover, .btn-success:active, .btn-success:focus { background-color: var(--accent-tint) !important; border-color: var(--accent) !important; color: var(--accent) !important; } .btn-danger { background-color: var(--error); border-color: var(--error); border-radius: var(--radius-pill) !important; } .btn-warning { border-radius: var(--radius-pill) !important; } .bg-purple { border-radius: var(--radius-pill) !important; } .btn-danger:hover, .btn-danger:active, .btn-danger:focus { background-color: oklch(45% 0.18 25) !important; border-color: oklch(45% 0.18 25) !important; } .btn-default { color: var(--text-primary); background-color: transparent; border: 1.5px solid var(--border-color); } .btn-default:hover { background-color: var(--bg-secondary); border-color: var(--text-muted); color: var(--text-heading); } .btn-default:active, .btn-default.active { background-color: var(--bg-card); border-color: var(--text-secondary); } .btn-flat { border-radius: 6px; -webkit-border-radius: 6px; } .btn-flat:hover { box-shadow: var(--shadow-sm); } .btn-lg { padding: 12px 24px; font-size: 15px; } .btn-sm { padding: 6px 12px; font-size: 14px; } .btn-xs { padding: 4px 8px; font-size: 13px; } .btn-block { border-radius: 6px; } /* --- Tables --- */ .table { margin-bottom: 0; } .table > thead > tr > th { border-bottom: 2px solid var(--border-color); border-top: none; color: var(--text-secondary); font-weight: 600; padding: 6px 10px; background: transparent; } .table > tbody > tr > td { border-top: none; border-bottom: 1px solid var(--border-color); padding: 6px 10px; color: var(--text-primary); vertical-align: middle; } .table > tbody > tr:hover > td { background-color: color-mix(in srgb, var(--accent) 6%, transparent); } .table-bordered { border: none; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-left: none; border-right: none; } /* --- Forms --- */ .form-control { border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); background-color: var(--bg-primary); box-shadow: none; transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); outline: none; } .form-control::placeholder { color: var(--text-muted); opacity: 1; } .form-control[readonly], .form-control[disabled] { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; cursor: default; } select.form-control { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238D8482' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; line-height: 1.4; } /* Flexbox replaces Bootstrap's table-cell layout so addon stretches to input height */ .input-group { display: flex !important; align-items: stretch; } .input-group .form-control { flex: 1 1 auto; width: 1% !important; } .input-group .form-control:first-child { border-radius: 6px 0 0 6px; } .input-group .form-control:last-child { border-radius: 0 6px 6px 0; } .input-group-addon { display: flex; align-items: center; background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; padding: 0 14px; white-space: nowrap; } .input-group-addon:first-child { border-right: none; border-radius: 6px 0 0 6px; } .input-group-addon:last-child { border-left: none; border-radius: 0 6px 6px 0; } .form-group { margin-bottom: 16px; } label { font-weight: 500; color: var(--text-secondary); font-size: 15px; margin-bottom: 6px; } /* Checkbox / Radio iCheck override */ .icheckbox_flat-blue, .iradio_flat-blue { background-color: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 3px !important; } .icheckbox_flat-blue.checked { background-color: var(--accent) !important; border-color: var(--accent) !important; } /* --- Modals --- */ .modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-lg); } .modal-header { padding: var(--space-md) var(--space-md) 0; border-bottom: none; } .modal-header .close { font-size: 24px; color: var(--text-muted); opacity: 0.7; } .modal-header .close:hover { opacity: 1; } .modal-body { padding: var(--space-md); } .modal-footer { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .modal-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; } /* --- Alerts --- */ .alert { border-radius: var(--radius); border: none; } .alert-success { background-color: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); } .alert-error, .alert-danger { background-color: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); } .alert-info { background-color: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info); } .alert-warning { background-color: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); } .alert-dismissable .close { color: currentColor; opacity: 0.5; } /* --- Labels --- */ .label { border-radius: 4px; font-weight: 500; padding: 3px 8px; } .label-success { background-color: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .label-danger { background-color: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); } .label-warning { background-color: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); } .label-info { background-color: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); } .label-primary { background-color: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); } /* --- Info Box (Dashboard) --- */ .info-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: none; background: var(--bg-card); min-height: 90px; overflow: hidden; } .info-box-icon { border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--accent-tint) !important; } .info-box-icon > i { color: var(--accent) !important; } .info-box-icon > img { filter: none; } .info-box-content { padding: var(--space-xs) var(--space-sm); } .info-box-text { font-size: 15px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; } .info-box-number { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw + 0.25rem, 1.625rem); letter-spacing: -0.02em; color: var(--text-heading); } /* --- Small boxes --- */ .small-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* Box variant overrides (box-success, box-info, etc) */ .box-success, .box-info, .box-warning, .box-danger { border-top: none !important; } .box-success > .box-header, .box-info > .box-header, .box-warning > .box-header, .box-danger > .box-header { color: var(--text-heading); } /* skin-green sidebar — light background, dark text */ .skin-green .main-sidebar { background: var(--bg-primary) !important; border-right: 1px solid var(--border-color); } .skin-green .sidebar-menu > li > a { color: var(--text-primary); } .skin-green .sidebar-menu > li.active > a { border-left-color: var(--accent); background: var(--accent-tint); color: var(--accent); } .skin-green .sidebar-menu > li > a:hover { background: var(--bg-secondary); color: var(--accent); } .skin-green .sidebar-menu .treeview-menu > li > a { color: var(--text-secondary); } .skin-green .sidebar-menu > li.active > a > .fa, .skin-green .sidebar-menu > li.active > a > .ion { color: var(--accent) !important; } /* --- Breadcrumb --- */ .content-header { padding: var(--space-sm) var(--space-md) 0; } .content-header > h1 { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); font-weight: 600; letter-spacing: -0.025em; color: var(--text-heading); } .content-header > h1 > small { font-size: 15px; color: var(--text-muted); font-weight: 400; margin-left: 8px; } .breadcrumb { background: transparent; padding: 0; margin-top: 4px; } .breadcrumb > li { font-size: 15px; color: var(--text-muted); } .breadcrumb > li > a { color: var(--text-secondary); } .breadcrumb > li > a:hover { color: var(--accent); } /* --- Footer --- */ .main-footer { background: transparent; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 14px; padding: var(--space-sm) var(--space-md); } .main-footer a { color: var(--text-secondary); } /* --- Login Page --- */ .login-page { background-color: var(--bg-secondary) !important; } .login-box { background: var(--bg-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 0; overflow: hidden; width: 340px; } .login-logo { padding: 32px 32px 0; text-align: center; } .login-logo img { max-height: 65px; } .login-box-body { background: transparent !important; padding: 29px 32px 32px; } .login-box-body .form-control { font-size: 13px !important; padding: 11px 36px 11px 13px; height: auto; } .login-box-body .form-control-feedback { width: 36px; height: 40px; line-height: 40px; font-size: 13px; } .login-box-body .btn { font-size: 13px !important; padding: 10px 16px; white-space: nowrap; } .login-box-body .row .col-xs-8:first-child { display: none; } .login-box-body .row .col-xs-4 { width: 100%; } .login-box-body a { font-size: 13px; display: inline-block; margin-top: 10px; } .login-box-msg { font-family: var(--font-display); margin: 0 0 20px; padding: 0; color: var(--text-heading); font-size: clamp(1.12rem, 2.43vw + 0.41rem, 1.42rem); font-weight: 700; letter-spacing: -0.025em; text-align: center; } /* Dark mode: logo band stays light so dark-colored logo image remains legible */ html.dark .login-logo { background: oklch(96% 0.006 28); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: 20px; } html.dark .login-box-msg { color: var(--text-heading); } /* --- Page Loader --- */ .content-wrapper > .loading-overlay { background: var(--bg-primary) !important; } /* --- Timeline / Calendar specific --- */ .fc-toolbar h2 { font-size: 15px; font-weight: 600; } .fc-day-header { font-weight: 500; padding: 8px 0 !important; } /* --- Modals with confirm delete --- */ .modal-info .modal-content { background: var(--bg-primary); } /* Fix modal backdrop for z-index */ .modal-backdrop { background: oklch(17% 0.010 28 / 0.5); } .modal-backdrop.in { opacity: 0.6; } /* --- Pagination --- */ .pagination > li > a, .pagination > li > span { color: var(--text-secondary); border-color: var(--border-color); border-radius: var(--radius-sm) !important; margin: 0 2px; } .pagination > li > a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); } .pagination > .active > a { background: var(--accent); border-color: var(--accent); color: #fff; } /* --- Dropdown menus general --- */ .dropdown-menu { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .dropdown-menu > li > a { padding: 8px 16px; color: var(--text-primary); } .dropdown-menu > li > a:hover { background: var(--accent-tint); } /* --- Progress bars --- */ .progress { border-radius: 4px; box-shadow: none; background: var(--bg-secondary); } .progress-bar { box-shadow: none; } /* --- Tabs --- */ .nav-tabs { border-bottom-color: var(--border-color); } .nav-tabs > li > a { color: var(--text-secondary); border: none; border-radius: 0; padding: 10px 16px; font-weight: 500; } .nav-tabs > li > a:hover { background: transparent; color: var(--accent); border-bottom: 2px solid var(--accent-tint); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: none; border-bottom: 2px solid var(--accent); color: var(--accent); background: transparent; } /* --- Treeview (sidebar submenu animation) --- */ .sidebar-menu .treeview-menu { padding-bottom: 4px; } /* --- Datetime pickers (datepicker, daterangepicker) --- */ .datepicker table tr td.active.active { background-color: var(--accent) !important; border-color: var(--accent) !important; } .daterangepicker td.active { background-color: var(--accent) !important; } .daterangepicker td.in-range { background-color: var(--accent-tint) !important; } /* ============================================================ Tabla de Posiciones — admin/tabla.jsp header.jsp injects dark tablesorter CSS (#2f2f2f rows, #fbfbfb text) and yellow active color (#f4ba51) when active-tablageneral-css is set. All rules here use !important to beat those inline