/**
 * modern-ui.css — Mejoras visuales modernas sobre AdminLTE 2.4.18
 * Compatible con Bootstrap 3.4.1 / jQuery 3.7.1
 * No sobreescribe clases críticas de layout
 */

/* =============================================
   CSS Custom Properties (Variables)
   ============================================= */
:root {
    --primary:       #3c8dbc;
    --primary-dark:  #2a6d97;
    --primary-rgb:   60, 141, 188;
    --success:       #00a65a;
    --warning:       #f39c12;
    --danger:        #dd4b39;
    --info:          #00c0ef;
    --sidebar-bg:    #222d32;
    --body-bg:       #ecf0f5;
    --text-muted:    #6c757d;
    --border-radius: 4px;
    --box-shadow:    0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.10);
    --box-shadow-lg: 0 4px 12px rgba(0,0,0,.15);
    --transition:    all .2s ease;
    --font-base:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --popup-shell-bg: rgba(255, 255, 255, 0.95);
    --popup-shell-border: rgba(60, 141, 188, 0.20);
    --popup-shell-shadow: 0 18px 38px rgba(23, 34, 48, 0.16);
    --popup-text: #223047;
    --popup-muted: #5f6f85;
}

.skin-playnet-ocean {
    --primary: #2a8da7;
    --primary-dark: #1f6f8b;
    --primary-rgb: 42, 141, 167;
    --sidebar-bg: #16222d;
    --menu-pop-bg: linear-gradient(135deg, #2c415f, #1f2f45);
    --menu-pop-sub-bg: rgba(14, 23, 36, .95);
    --menu-pop-border: #38b7cf;
    --popup-shell-bg: rgba(244, 250, 255, 0.95);
    --popup-shell-border: rgba(56, 183, 207, 0.22);
}

.skin-playnet-sand {
    --primary: #d18b39;
    --primary-dark: #a86a2a;
    --primary-rgb: 209, 139, 57;
    --sidebar-bg: #25282f;
    --menu-pop-bg: linear-gradient(135deg, #6b4b2f, #4f3826);
    --menu-pop-sub-bg: rgba(38, 29, 22, .95);
    --menu-pop-border: #f0ad4e;
    --popup-shell-bg: rgba(255, 248, 241, 0.95);
    --popup-shell-border: rgba(240, 173, 78, 0.24);
}

.skin-playnet-breeze {
    --primary: #4f9aa8;
    --primary-dark: #3f7e8b;
    --primary-rgb: 79, 154, 168;
    --sidebar-bg: #253241;
    --menu-pop-bg: linear-gradient(135deg, #3d5f72, #2b4558);
    --menu-pop-sub-bg: rgba(22, 35, 49, .95);
    --menu-pop-border: #7fcfd0;
    --popup-shell-bg: rgba(243, 250, 251, 0.95);
    --popup-shell-border: rgba(127, 207, 208, 0.24);
}

.skin-playnet-slate {
    --primary: #64748b;
    --primary-dark: #4d5b71;
    --primary-rgb: 100, 116, 139;
    --sidebar-bg: #232931;
    --menu-pop-bg: linear-gradient(135deg, #4b5667, #364152);
    --menu-pop-sub-bg: rgba(26, 32, 41, .95);
    --menu-pop-border: #9caec4;
    --popup-shell-bg: rgba(246, 248, 252, 0.95);
    --popup-shell-border: rgba(156, 174, 196, 0.24);
}

.skin-playnet-navy {
    --primary: #3f6cb5;
    --primary-dark: #2a4f8f;
    --primary-rgb: 63, 108, 181;
    --sidebar-bg: #141f33;
    --menu-pop-bg: linear-gradient(135deg, #2d4f84, #1f3861);
    --menu-pop-sub-bg: rgba(12, 22, 38, .95);
    --menu-pop-border: #6fa4ff;
    --popup-shell-bg: rgba(243, 247, 255, 0.95);
    --popup-shell-border: rgba(111, 164, 255, 0.24);
}

.skin-playnet-ember {
    --primary: #d97a3e;
    --primary-dark: #b75f28;
    --primary-rgb: 217, 122, 62;
    --sidebar-bg: #2c2526;
    --menu-pop-bg: linear-gradient(135deg, #7f4a2c, #633822);
    --menu-pop-sub-bg: rgba(37, 24, 18, .95);
    --menu-pop-border: #f2a365;
    --popup-shell-bg: rgba(255, 247, 242, 0.95);
    --popup-shell-border: rgba(242, 163, 101, 0.24);
}

.skin-playnet-violet {
    --primary: #7a66d1;
    --primary-dark: #5f4bb3;
    --primary-rgb: 122, 102, 209;
    --sidebar-bg: #241f35;
    --menu-pop-bg: linear-gradient(135deg, #5b4c95, #40346f);
    --menu-pop-sub-bg: rgba(27, 22, 45, .95);
    --menu-pop-border: #af9dff;
    --popup-shell-bg: rgba(248, 245, 255, 0.95);
    --popup-shell-border: rgba(175, 157, 255, 0.24);
}

/* =============================================
   Tipografía base
   ============================================= */
body {
    font-family: var(--font-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* =============================================
   Box / Panel — sombras más suaves
   ============================================= */
.box {
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    transition: box-shadow .2s ease;
}

.box:hover {
    box-shadow: var(--box-shadow-lg);
}

.box-header {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* =============================================
   Botones — efectos modernos
   ============================================= */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    letter-spacing: 0.01em;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary  { background-color: var(--primary);  border-color: var(--primary-dark); }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--primary-dark); border-color: var(--primary-dark); }

.btn-success  { background-color: var(--success);  }
.btn-warning  { background-color: var(--warning);  }
.btn-danger   { background-color: var(--danger);   }
.btn-info     { background-color: var(--info);     }

/* =============================================
   Inputs / Forms
   ============================================= */
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-size: 13px;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(60,141,188,.20);
    outline: none;
}

/* =============================================
   Tablas
   ============================================= */
.table > thead > tr > th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(60,141,188,.06);
    cursor: default;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.025);
}

/* =============================================
   Navbar superior
   ============================================= */
.main-header .navbar {
    transition: background .2s ease;
    box-shadow: 0 2px 10px rgba(14, 22, 33, .08);
}

.main-header .navbar .navbar-custom-menu .nav > li > a {
    transition: background .15s ease;
}

.main-header .logo {
    letter-spacing: .01em;
    font-weight: 600;
}

.content-wrapper,
.right-side {
    background: linear-gradient(180deg, #f2f5fa 0%, #edf2f8 100%);
}

/* =============================================
   Sidebar
   ============================================= */
.sidebar-menu > li > a {
    transition: background .15s ease, padding-left .15s ease;
    border-left: 3px solid transparent;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li > a:hover {
    border-left-color: var(--primary);
}

.sidebar-menu > li > a:hover {
    padding-left: 17px;
}

[class*="skin-playnet-"] .main-sidebar,
[class*="skin-playnet-"] .left-side,
[class*="skin-playnet-"] .sidebar {
    overflow: visible;
}

[class*="skin-playnet-"] .main-header .logo,
[class*="skin-playnet-"] .main-header .logo:hover,
[class*="skin-playnet-"] .main-header .logo:focus {
    color: #f7fbff !important;
}

[class*="skin-playnet-"] .main-header .navbar .sidebar-toggle,
[class*="skin-playnet-"] .main-header .navbar .nav > li > a,
[class*="skin-playnet-"] .main-header .navbar .navbar-brand {
    color: #edf4ff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

[class*="skin-playnet-"] .main-header .navbar .sidebar-toggle:hover,
[class*="skin-playnet-"] .main-header .navbar .nav > li > a:hover,
[class*="skin-playnet-"] .main-header .navbar .nav > li > a:focus,
[class*="skin-playnet-"] .main-header .navbar .nav > li.open > a {
    color: #ffffff !important;
}

[class*="skin-playnet-"] .main-header .navbar .dropdown-menu > li > a {
    color: #2b3648;
}

[class*="skin-playnet-"] .main-header .navbar .dropdown-menu > li > a:hover {
    color: #1f2a3b;
}

[class*="skin-playnet-"] .sidebar-menu > li > a {
    color: #d9e5f3;
    font-weight: 500;
}

[class*="skin-playnet-"] .sidebar-menu > li > a > i,
[class*="skin-playnet-"] .sidebar-menu > li > a > .fa,
[class*="skin-playnet-"] .sidebar-menu > li > a > .glyphicon,
[class*="skin-playnet-"] .sidebar-menu > li > a > .ion {
    color: #9fc0df;
}

[class*="skin-playnet-"] .sidebar-menu > li.active > a,
[class*="skin-playnet-"] .sidebar-menu > li > a:hover {
    color: #ffffff;
}

[class*="skin-playnet-"] .sidebar-menu > li.active > a > i,
[class*="skin-playnet-"] .sidebar-menu > li > a:hover > i,
[class*="skin-playnet-"] .sidebar-menu > li.active > a > .fa,
[class*="skin-playnet-"] .sidebar-menu > li > a:hover > .fa {
    color: #ffffff;
}

[class*="skin-playnet-"] .user-panel > .info,
[class*="skin-playnet-"] .user-panel > .info > a {
    color: #d9e8f7;
}

[class*="skin-playnet-"] .sidebar-menu > li > .treeview-menu {
    margin: 0;
    background: var(--menu-pop-sub-bg, rgba(21, 30, 44, .96));
    border-left: 3px solid var(--menu-pop-border, rgba(255,255,255,.12));
}

[class*="skin-playnet-"] .sidebar-menu > li > .treeview-menu > li > a {
    color: #c9d5e4;
}

[class*="skin-playnet-"] .sidebar-menu > li > .treeview-menu > li > a:hover {
    color: #ffffff;
    background: rgba(255,255,255,.08);
}

[class*="skin-playnet-"].sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
    width: 220px;
    z-index: 1060;
    background: var(--menu-pop-bg, linear-gradient(135deg, #33445e, #223147));
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

[class*="skin-playnet-"].sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    display: block !important;
    left: 50px;
    top: 44px;
    width: 220px;
    position: absolute;
    z-index: 1055;
    border-radius: 0 0 8px 0;
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

.sidebar-menu > li.active > a {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* =============================================
   Dropdown usuario — coherente con el tema
   ============================================= */

/* Cabecera del dropdown: usa el color primario del tema */
.main-header li.user-header {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
}

.main-header li.user-header p,
.main-header li.user-header p small {
    color: rgba(255,255,255,.90) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Menú desplegable del usuario */
.navbar-nav > .user-menu > .dropdown-menu {
    border: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    overflow: hidden;
}

/* Footer del dropdown: fondo degradado usando el tema */
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: linear-gradient(145deg, var(--primary), var(--primary-dark)) !important;
    padding: 12px 15px !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
}

/* Todos los botones del footer: texto blanco siempre visible */
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.30);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    border-radius: 5px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: none !important;
    transition: background .15s, box-shadow .15s;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
    border-color: rgba(255,255,255,.45) !important;
}

/* Botón "Cambiar Contraseña" — vidrio claro sobre el gradiente */
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-info {
    background: rgba(255,255,255,.18) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-info:hover {
    background: rgba(255,255,255,.30) !important;
}

/* Botón "Salir" — rojo sólido */
.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-danger {
    background: rgba(200, 45, 30, .78) !important;
    border-color: rgba(220, 60, 40, .50) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-danger:hover {
    background: rgba(200, 45, 30, .96) !important;
}

.content-wrapper .content {
    padding-top: 18px;
}

.nav-tabs-custom,
.box {
    border-radius: 8px;
    overflow: hidden;
}

.box-header.with-border {
    border-bottom: 1px solid rgba(0,0,0,.07);
}

.box-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    background: rgba(247,249,252,.88);
}

.main-footer {
    border-top: 1px solid #dce3ec;
    background: #f8fbff;
}

/* =============================================
   Info boxes y small boxes
   ============================================= */
.info-box {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.info-box:hover {
    box-shadow: var(--box-shadow-lg);
    transform: translateY(-2px);
}

.small-box {
    border-radius: var(--border-radius);
    transition: box-shadow .2s ease, transform .2s ease;
}

.small-box:hover {
    box-shadow: var(--box-shadow-lg) !important;
    transform: translateY(-2px);
}

/* =============================================
   Badges / Labels
   ============================================= */
.badge, .label {
    border-radius: 10px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* =============================================
   Alertas
   ============================================= */
.alert {
    border-radius: var(--border-radius);
    border-left-width: 4px;
    font-size: 13px;
}

[class*="skin-playnet-"] .alert {
    border: 1px solid var(--popup-shell-border);
    border-left-width: 4px;
    border-radius: 12px;
    color: var(--popup-text);
    background: linear-gradient(135deg, var(--popup-shell-bg), rgba(255,255,255,0.92));
    box-shadow: var(--popup-shell-shadow);
    backdrop-filter: blur(8px);
}

[class*="skin-playnet-"] .alert .close {
    color: var(--popup-muted);
    opacity: .75;
}

[class*="skin-playnet-"] .alert .close:hover {
    color: var(--popup-text);
    opacity: 1;
}

[class*="skin-playnet-"] .alert-success {
    border-left-color: #16a34a;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.24) 0%, rgba(22, 163, 74, 0.18) 62.5%, rgba(255,255,255,0.70) 75%, rgba(var(--primary-rgb), 0.38) 100%);
}

[class*="skin-playnet-"] .alert-info {
    border-left-color: var(--primary);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.24) 0%, rgba(var(--primary-rgb), 0.18) 62.5%, rgba(255,255,255,0.70) 75%, rgba(var(--primary-rgb), 0.35) 100%);
}

[class*="skin-playnet-"] .alert-warning {
    border-left-color: #d97706;
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.24) 0%, rgba(217, 119, 6, 0.18) 62.5%, rgba(255,255,255,0.70) 75%, rgba(var(--primary-rgb), 0.36) 100%);
}

[class*="skin-playnet-"] .alert-danger {
    border-left-color: #dc2626;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.24) 0%, rgba(220, 38, 38, 0.18) 62.5%, rgba(255,255,255,0.70) 75%, rgba(var(--primary-rgb), 0.38) 100%);
}

[class*="skin-playnet-"] .sweet-alert,
[class*="skin-playnet-"] .swal2-popup {
    border-radius: 18px;
    background: linear-gradient(145deg, var(--popup-shell-bg), rgba(255,255,255,0.94));
    border: 1px solid var(--popup-shell-border);
    box-shadow: 0 22px 50px rgba(17, 26, 38, 0.22);
    color: var(--popup-text);
}

[class*="skin-playnet-"] .sweet-alert h2,
[class*="skin-playnet-"] .sweet-alert p,
[class*="skin-playnet-"] .swal2-title,
[class*="skin-playnet-"] .swal2-html-container {
    color: var(--popup-text);
}

[class*="skin-playnet-"] .sweet-alert button,
[class*="skin-playnet-"] .swal2-confirm,
[class*="skin-playnet-"] .swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    border: 0 !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.16);
}

[class*="skin-playnet-"] .swal2-cancel,
[class*="skin-playnet-"] .swal2-styled.swal2-cancel {
    background: linear-gradient(135deg, #697586, #8894a7) !important;
    border: 0 !important;
}

[class*="skin-playnet-"] .sweet-alert .sa-icon.sa-success .sa-placeholder,
[class*="skin-playnet-"] .sweet-alert .sa-icon.sa-success,
[class*="skin-playnet-"] .swal2-icon.swal2-success {
    border-color: rgba(22, 163, 74, 0.35) !important;
}

[class*="skin-playnet-"] .sweet-alert .sa-icon.sa-error,
[class*="skin-playnet-"] .swal2-icon.swal2-error {
    border-color: rgba(220, 38, 38, 0.35) !important;
}

/* =============================================
   Paginación
   ============================================= */
.pagination > li > a,
.pagination > li > span {
    transition: var(--transition);
}

/* =============================================
   DataTables — mejoras de UI
   ============================================= */
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    padding: 4px 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(60,141,188,.20);
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da;
    padding: 2px 6px;
}

/* =============================================
   Select2 — integración con Bootstrap tema
   ============================================= */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--border-radius);
    border-color: #ced4da;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(60,141,188,.20);
}

.select2-dropdown {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
}

/* =============================================
   Loading / Spinner overlay
   ============================================= */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

/* =============================================
   Scrollbar personalizado (Webkit)
   ============================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* =============================================
   Utility helpers modernos
   ============================================= */
.cursor-pointer { cursor: pointer; }
.font-weight-600 { font-weight: 600; }
.text-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transition-all  { transition: var(--transition); }
.rounded-sm      { border-radius: var(--border-radius); }
.shadow-sm       { box-shadow: var(--box-shadow); }
.shadow-lg       { box-shadow: var(--box-shadow-lg); }

/* =============================================
   Smooth scroll
   ============================================= */
html {
    scroll-behavior: smooth;
}

/* =============================================
   Skins personalizados (PLAYNET)
   ============================================= */
.skin-playnet-ocean .main-header .logo,
.skin-playnet-ocean .main-header .navbar {
    background: linear-gradient(135deg, #1f6f8b, #2a8da7);
    color: #fff;
}

.skin-playnet-ocean .main-header .logo:hover,
.skin-playnet-ocean .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-ocean .main-header .navbar .nav > li > a:hover,
.skin-playnet-ocean .main-header .navbar .nav > li > a:active,
.skin-playnet-ocean .main-header .navbar .nav > li > a:focus,
.skin-playnet-ocean .main-header .navbar .open > a,
.skin-playnet-ocean .main-header .navbar .open > a:hover,
.skin-playnet-ocean .main-header .navbar .open > a:focus {
    background: #1b6179;
    color: #fff;
}

.skin-playnet-ocean .main-sidebar,
.skin-playnet-ocean .left-side {
    background: linear-gradient(180deg, #1e2d3b 0%, #16222d 100%);
}

.skin-playnet-ocean .sidebar-menu > li.active > a,
.skin-playnet-ocean .sidebar-menu > li > a:hover {
    background: rgba(42, 141, 167, .18);
    border-left-color: #38b7cf;
}

.skin-playnet-sand .main-header .logo,
.skin-playnet-sand .main-header .navbar {
    background: linear-gradient(135deg, #a86a2a, #d18b39);
    color: #fff;
}

.skin-playnet-sand .main-header .logo:hover,
.skin-playnet-sand .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-sand .main-header .navbar .nav > li > a:hover,
.skin-playnet-sand .main-header .navbar .nav > li > a:active,
.skin-playnet-sand .main-header .navbar .nav > li > a:focus,
.skin-playnet-sand .main-header .navbar .open > a,
.skin-playnet-sand .main-header .navbar .open > a:hover,
.skin-playnet-sand .main-header .navbar .open > a:focus {
    background: #8d5924;
    color: #fff;
}

.skin-playnet-sand .main-sidebar,
.skin-playnet-sand .left-side {
    background: linear-gradient(180deg, #2e3138 0%, #25282f 100%);
}

.skin-playnet-sand .sidebar-menu > li.active > a,
.skin-playnet-sand .sidebar-menu > li > a:hover {
    background: rgba(209, 139, 57, .16);
    border-left-color: #f0ad4e;
}

.skin-playnet-breeze .main-header .logo,
.skin-playnet-breeze .main-header .navbar {
    background: linear-gradient(135deg, #4f9aa8, #6fb7bc);
    color: #fff;
}

.skin-playnet-breeze .main-header .logo:hover,
.skin-playnet-breeze .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-breeze .main-header .navbar .nav > li > a:hover,
.skin-playnet-breeze .main-header .navbar .nav > li > a:active,
.skin-playnet-breeze .main-header .navbar .nav > li > a:focus,
.skin-playnet-breeze .main-header .navbar .open > a,
.skin-playnet-breeze .main-header .navbar .open > a:hover,
.skin-playnet-breeze .main-header .navbar .open > a:focus {
    background: #3f7e8b;
    color: #fff;
}

.skin-playnet-breeze .main-sidebar,
.skin-playnet-breeze .left-side {
    background: linear-gradient(180deg, #2f3e50 0%, #253241 100%);
}

.skin-playnet-breeze .sidebar-menu > li.active > a,
.skin-playnet-breeze .sidebar-menu > li > a:hover {
    background: rgba(111, 183, 188, .17);
    border-left-color: #7fcfd0;
}

.skin-playnet-slate .main-header .logo,
.skin-playnet-slate .main-header .navbar {
    background: linear-gradient(135deg, #64748b, #7c8ea6);
    color: #fff;
}

.skin-playnet-slate .main-header .logo:hover,
.skin-playnet-slate .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-slate .main-header .navbar .nav > li > a:hover,
.skin-playnet-slate .main-header .navbar .nav > li > a:active,
.skin-playnet-slate .main-header .navbar .nav > li > a:focus,
.skin-playnet-slate .main-header .navbar .open > a,
.skin-playnet-slate .main-header .navbar .open > a:hover,
.skin-playnet-slate .main-header .navbar .open > a:focus {
    background: #4d5b71;
    color: #fff;
}

.skin-playnet-slate .main-sidebar,
.skin-playnet-slate .left-side {
    background: linear-gradient(180deg, #2d3440 0%, #232931 100%);
}

.skin-playnet-slate .sidebar-menu > li.active > a,
.skin-playnet-slate .sidebar-menu > li > a:hover {
    background: rgba(124, 142, 166, .18);
    border-left-color: #9caec4;
}

.skin-playnet-navy .main-header .logo,
.skin-playnet-navy .main-header .navbar {
    background: linear-gradient(135deg, #1f3f73, #355d9a);
    color: #fff;
}

.skin-playnet-navy .main-header .logo:hover,
.skin-playnet-navy .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-navy .main-header .navbar .nav > li > a:hover,
.skin-playnet-navy .main-header .navbar .nav > li > a:active,
.skin-playnet-navy .main-header .navbar .nav > li > a:focus,
.skin-playnet-navy .main-header .navbar .open > a,
.skin-playnet-navy .main-header .navbar .open > a:hover,
.skin-playnet-navy .main-header .navbar .open > a:focus {
    background: #1b3561;
    color: #fff;
}

.skin-playnet-navy .main-sidebar,
.skin-playnet-navy .left-side {
    background: linear-gradient(180deg, #1a2740 0%, #141f33 100%);
}

.skin-playnet-navy .sidebar-menu > li.active > a,
.skin-playnet-navy .sidebar-menu > li > a:hover {
    background: rgba(63, 108, 181, .22);
    border-left-color: #6fa4ff;
}

.skin-playnet-ember .main-header .logo,
.skin-playnet-ember .main-header .navbar {
    background: linear-gradient(135deg, #b85f2a, #de8c3f);
    color: #fff;
}

.skin-playnet-ember .main-header .logo:hover,
.skin-playnet-ember .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-ember .main-header .navbar .nav > li > a:hover,
.skin-playnet-ember .main-header .navbar .nav > li > a:active,
.skin-playnet-ember .main-header .navbar .nav > li > a:focus,
.skin-playnet-ember .main-header .navbar .open > a,
.skin-playnet-ember .main-header .navbar .open > a:hover,
.skin-playnet-ember .main-header .navbar .open > a:focus {
    background: #9d4f22;
    color: #fff;
}

.skin-playnet-ember .main-sidebar,
.skin-playnet-ember .left-side {
    background: linear-gradient(180deg, #352d2f 0%, #2c2526 100%);
}

.skin-playnet-ember .sidebar-menu > li.active > a,
.skin-playnet-ember .sidebar-menu > li > a:hover {
    background: rgba(217, 122, 62, .20);
    border-left-color: #f2a365;
}

.skin-playnet-violet .main-header .logo,
.skin-playnet-violet .main-header .navbar {
    background: linear-gradient(135deg, #5745a4, #7f6ae0);
    color: #fff;
}

.skin-playnet-violet .main-header .logo:hover,
.skin-playnet-violet .main-header .navbar .sidebar-toggle:hover,
.skin-playnet-violet .main-header .navbar .nav > li > a:hover,
.skin-playnet-violet .main-header .navbar .nav > li > a:active,
.skin-playnet-violet .main-header .navbar .nav > li > a:focus,
.skin-playnet-violet .main-header .navbar .open > a,
.skin-playnet-violet .main-header .navbar .open > a:hover,
.skin-playnet-violet .main-header .navbar .open > a:focus {
    background: #48378e;
    color: #fff;
}

.skin-playnet-violet .main-sidebar,
.skin-playnet-violet .left-side {
    background: linear-gradient(180deg, #2e2744 0%, #241f35 100%);
}

.skin-playnet-violet .sidebar-menu > li.active > a,
.skin-playnet-violet .sidebar-menu > li > a:hover {
    background: rgba(122, 102, 209, .22);
    border-left-color: #af9dff;
}

/* =============================================
   Print — ocultar elementos de UI
   ============================================= */
@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .no-print {
        display: none !important;
    }
    .content-wrapper {
        margin-left: 0 !important;
    }
    .box {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* =============================================
   Responsive — mejoras para móvil
   ============================================= */
@media (max-width: 767px) {
    .box-header .box-title {
        font-size: 14px;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .btn {
        font-size: 13px;
    }

    .form-control {
        font-size: 16px; /* Evita zoom en iOS */
    }
}

/* =============================================
   Responsive — Tablets (768px – 1199px)
   Cubre tablets de 9", 11" y 13" (portrait y landscape)
   ============================================= */
@media (min-width: 768px) and (max-width: 1199px) {

    /* ── Tablas siempre con scroll horizontal en tablets ───── */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    /* ── Evitar overflow horizontal en el área de contenido ── */
    .content-wrapper,
    .right-side {
        overflow-x: hidden;
    }

    /* ── Box-body con tabla ancha: permitir scroll horizontal ─ */
    .box-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Filtros con flex: siempre wrap en tablets ─────────── */
    .content-wrapper [style*="display:flex"],
    .content-wrapper [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* ── Cards de stats: 2 columnas en lugar de 4 ──────────── */
    .col-sm-3.col-md-2 {
        width: 50%;
    }

    /* ── Tipografía levemente reducida ─────────────────────── */
    .box-header .box-title {
        font-size: 14px;
    }

    /* ── Inputs de fecha y select2 no desborden ────────────── */
    .form-control {
        max-width: 100%;
    }

    /* ── Breadcrumb ocultar en pantallas medianas ───────────── */
    .breadcrumb {
        font-size: 11px;
    }

    /* ── Columnas de tabla: texto más compacto ──────────────── */
    .table-condensed > thead > tr > th,
    .table-condensed > tbody > tr > td,
    .table > thead > tr > th,
    .table > tbody > tr > td {
        font-size: 11px;
        padding: 5px 6px;
    }
}

/* =============================================
   Sidebar mini en tablets — cuando está colapsado
   muestra íconos solamente (AdminLTE sidebar-mini)
   ============================================= */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Asegurar que el contenido llene el espacio liberado */
    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .right-side,
    body.sidebar-collapse .main-footer {
        margin-left: 50px !important;
    }
}