/* WinnerMax estilos adicionales - DARK MODE */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;padding:1rem;z-index:1000;}
.modal.show{display:flex !important;}
.modal .modal-dialog{background:#151b2e !important;border-radius:.5rem;max-width:600px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.5);max-height:calc(100vh - 2rem);overflow-y:auto;border:1px solid #2d3748;}
.modal .modal-content{background:#151b2e !important;color:#e2e8f0 !important;border:1px solid #2d3748 !important;}
.modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #2d3748;background:#151b2e !important;}
.modal .modal-title{color:#e2e8f0 !important;}
.modal .modal-body{padding:1rem;color:#e2e8f0 !important;background:#151b2e !important;}
.modal .modal-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:1rem;border-top:1px solid #2d3748;background:#151b2e !important;}
.modal .btn-close{background:transparent;border:0;font-size:1.25rem;cursor:pointer;color:#e2e8f0;}
.alert{padding:.5rem .75rem;border:1px solid #2d3748;background:#1e2739;border-left-width:.25rem;border-left-color:#4a90e2;border-radius:.375rem;margin-bottom:1rem;color:#e2e8f0;}
.alert-danger{background:#1e2739;border-left-color:#e25555;color:#fca5a5;}
.brand-title{font-weight:800;letter-spacing:.5px;color:#e2e8f0;}
.logo{height:40px;}
.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;}
.footer{text-align:center;margin-top:2rem;color:#94a3b8;}
.menu-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;background:#1e2739;color:#e2e8f0;font-size:.75rem;margin-left:.5rem;}
.input-group{display:flex;align-items:center;}
.input-group .form-control{border-top-right-radius:0;border-bottom-right-radius:0;}
.input-group .btn{border-top-left-radius:0;border-bottom-left-radius:0;}

/* Oculta el botón WinnerMax en el encabezado del sidebar */
.sidebar .header-logo .btn{display:none !important;}
/* Oculta cualquier .btn que sea hijo directo del sidebar (no afecta el menú dentro de nav) */
.sidebar > .btn{display:none !important;}

/* Logo en sidebar - forzar color azul */
.sidebar img[src*="winnermax_logo"]{
  filter: none !important;
}

/* ====== DARK MODE - Gris oscuro predominante ====== */
:root{
  /* Colores Dark Mode - Gris muy oscuro */
  --dark-bg-primary: #0a0e1a;     /* fondo principal MUY oscuro */
  --dark-bg-secondary: #151b2e;   /* fondo secundario gris muy oscuro */
  --dark-bg-tertiary: #1e2739;    /* fondo terciario gris oscuro */
  --dark-border: #2d3748;         /* bordes gris */
  --dark-text-primary: #e2e8f0;   /* texto principal */
  --dark-text-secondary: #94a3b8; /* texto secundario */
  
  /* Colores de acento - menos saturados */
  --brand-blue: #4a90e2;       /* azul más apagado */
  --brand-blue-dark: #2d5f8d;  /* azul muy oscuro */
  --brand-blue-darker: #1a3a5c; /* azul casi negro */
  --brand-blue-50: #151b2e;    /* azul muy oscuro para fondos dark */
  --brand-red: #e25555;        /* rojo más apagado */
  --brand-red-dark: #b83e3e;   /* rojo oscuro */
  --brand-red-50: #151b2e;     /* rojo muy oscuro para acentos suaves */
  --brand-green: #4ade80;      /* verde para éxito */
  --brand-green-dark: #22c55e; /* verde oscuro para éxito */

  /* Overrides Bootstrap */
  --bs-primary: var(--brand-blue);
  --bs-primary-rgb: 74, 144, 226;
  --bs-secondary: var(--brand-red);
  --bs-secondary-rgb: 226, 85, 85;
  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: var(--brand-blue-dark);
  --bs-body-bg: var(--dark-bg-primary);
  --bs-body-color: var(--dark-text-primary);
}

/* Body dark mode */
body{
  background: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

/* Containers dark mode */
.container,
.content{
  background: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

/* Cards dark mode */
.card{
  background: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.card .p-3,
.card p,
.card div,
.card span,
.table div{
  color: var(--dark-text-primary) !important;
  background: transparent !important;
}

.card .p-3{
  background: var(--dark-bg-secondary) !important;
}

/* Fix para divs con estilos inline de fondo claro */
[style*="background:#fafafa"],
[style*="background: #fafafa"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background: white"]{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

/* Modales - asegurar que no sean transparentes */
.modal .card{
  background: var(--dark-bg-tertiary) !important;
  border: 1px solid var(--dark-border) !important;
}

.modal .card .p-3{
  background: var(--dark-bg-tertiary) !important;
}

.modal h5,
.modal h4,
.modal h3,
.modal h2,
.modal label,
.modal p,
.modal span,
.modal div{
  color: var(--dark-text-primary) !important;
}

/* Formularios dark mode */
.form-control,
.form-select,
textarea.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"]{
  background: var(--dark-bg-tertiary) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.form-control:focus,
.form-select:focus,
input:focus{
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--brand-blue) !important;
  color: var(--dark-text-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.25);
}

.form-control::placeholder,
input::placeholder{
  color: var(--dark-text-secondary) !important;
}

.form-label,
label{
  color: var(--dark-text-primary) !important;
}

.form-control:disabled,
.form-select:disabled,
input:disabled{
  background: var(--dark-bg-primary) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* Tablas dark mode */
.table{
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.table thead th{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.table tbody td,
.table tbody th{
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.table tfoot td,
.table tfoot th{
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.table-sm tbody td,
.table-sm tbody th{
  background: var(--dark-bg-secondary) !important;
}

/* Text colors */
.text-muted{
  color: var(--dark-text-secondary) !important;
}

.text-dark,
.text-body{
  color: var(--dark-text-primary) !important;
}

.text-white{
  color: #fff !important;
}

/* Links */
a{
  color: var(--brand-blue) !important;
}

a:hover{
  color: var(--brand-blue-dark) !important;
}

.small{
  color: var(--dark-text-secondary);
}

.small a{
  color: var(--brand-blue) !important;
}

/* Badges */
.badge{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

.badge.bg-success{
  background: var(--brand-green) !important;
  color: #fff !important;
}

.badge.bg-warning{
  background: #f59e0b !important;
  color: #000 !important;
}

.badge.bg-danger{
  background: var(--brand-red) !important;
  color: #fff !important;
}

.badge.bg-secondary{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

.badge.bg-primary{
  background: var(--brand-blue) !important;
  color: #fff !important;
}

.badge.bg-info{
  background: #3b82f6 !important;
  color: #fff !important;
}

/* Fix para badges con fondo claro */
.badge.text-dark,
.badge.text-muted{
  color: var(--dark-text-primary) !important;
}

/* ====== Botón base (afecta login y acciones generales) ====== */
.btn{
  color: var(--dark-text-primary);
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}
.btn:hover,
.btn:focus{
  color: var(--brand-blue);
  background: var(--dark-bg-primary);
  border-color: var(--brand-blue);
}

/* ====== Botones con colores de marca ====== */
.btn-primary{
  color: var(--dark-text-primary);
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}
.btn-primary:hover,
.btn-primary:focus{
  color: var(--brand-blue);
  background: var(--dark-bg-primary);
  border-color: var(--brand-blue);
}

.btn-secondary{
  color: var(--brand-red);
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}
.btn-secondary:hover,
.btn-secondary:focus{
  color: var(--brand-red);
  background: var(--dark-bg-primary);
  border-color: var(--brand-red);
}

/* Éxito (verde) */
.btn-success{
  color: #fff;
  background: var(--brand-green);
  border-color: var(--brand-green-dark);
}
.btn-success:hover,
.btn-success:focus{
  color: #fff;
  background: var(--brand-green-dark);
  border-color: var(--brand-green);
}

.btn-outline-primary{
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color:#fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-outline-secondary{
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  color:#fff;
  background: var(--brand-red);
  border-color: var(--brand-red);
}

/* ====== Sidebar / Menú ====== */
.sidebar{
  background: var(--dark-bg-secondary) !important;
  border-right: 4px solid var(--brand-blue);
  padding: 1rem;
  color: var(--dark-text-primary);
}
.sidebar .platform-title{color: var(--dark-text-primary);}
.sidebar .badge{background: var(--dark-bg-tertiary); color: var(--dark-text-primary);}
.sidebar a{ color: var(--dark-text-primary) !important; }
.sidebar .nav .btn{
  margin-bottom:.5rem;
  font-weight:700;
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border:1px solid var(--dark-border) !important;
}
.sidebar .nav .btn:hover,
.sidebar .nav .btn.active{
  background: var(--dark-bg-primary) !important;
  color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}
.sidebar .nav .btn.btn-secondary{
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--brand-red) !important;
}
.sidebar .nav .btn.btn-secondary:hover{
  background: var(--dark-bg-primary) !important;
  border-color: var(--brand-red) !important;
}

/* Permitir verde para botones de éxito en el sidebar */
.sidebar .nav .btn.btn-success{
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%) !important;
  border-color: var(--brand-green-dark) !important;
}
.sidebar .nav .btn.btn-success:hover,
.sidebar .nav .btn.btn-success.active{
  background: linear-gradient(135deg, var(--brand-green-dark) 0%, var(--brand-green) 100%) !important;
  border-color: var(--brand-green) !important;
}

/* ====== Barra móvil ====== */
.mobile-toolbar{display:flex;align-items:center;gap:.75rem;margin:.75rem 0;}
.mobile-toolbar .brand-title{color: var(--brand-blue) !important;} 

/* ====== Cards, tablas y paginación ====== */
.card-title{
  font-weight:700;
  color: var(--dark-text-primary);
  border-left: 6px solid var(--brand-blue);
  padding-left:.5rem;
}

.pagination .page-link{
  color: var(--dark-text-primary) !important;
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

.pagination .page-link:hover{
  background: var(--dark-bg-tertiary) !important;
  color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}

.pagination .page-item.active .page-link{
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}

.pagination .page-item.disabled .page-link{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* Fix para divs de paginación que no usan la clase pagination */
.dataTables_paginate,
.dataTables_info,
.dataTables_length{
  color: var(--dark-text-primary) !important;
  background: transparent !important;
}

.dataTables_paginate .paginate_button,
.dataTables_paginate a{
  color: var(--dark-text-primary) !important;
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

.dataTables_paginate .paginate_button:hover,
.dataTables_paginate a:hover{
  color: var(--brand-blue) !important;
  background: var(--dark-bg-tertiary) !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.active{
  background: var(--brand-blue) !important;
  color: #fff !important;
}

/* Elementos de entrada por página */
select[name*="entries"],
select[name*="per_page"],
.dataTables_length select{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* Acentos y detalles */
.brand-title{color: var(--dark-text-primary);}
.alert{border-left-color: var(--brand-blue);}

/* ====== Login: dark mode ====== */
.login,
.login body{
  background: var(--dark-bg-primary) !important;
}

.login .container{
  background: var(--dark-bg-primary) !important;
}

.login .brand-title{color: var(--brand-blue) !important;}
.login .card-title{color: var(--brand-blue) !important;}

.login .card{
  background: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border) !important;
}

.login .btn{
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}
.login .btn:hover,
.login .btn:focus{
  background: var(--dark-bg-primary) !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}

.login .btn-secondary{
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.login .btn-secondary:hover{
  background: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.login .small{
  color: var(--dark-text-secondary) !important;
}

.login .small a{color: var(--brand-blue) !important;}
.login .small a:hover,
.login .small a:focus{color: var(--brand-blue-dark) !important;}

.login .header{
  color: var(--dark-text-primary) !important;
}

.login .alert{
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* Donut chart dark mode */
.donut{
  border: 8px solid var(--dark-bg-tertiary);
}

/* Legend dark mode */
.legend{
  color: var(--dark-text-primary);
}

.legend .sw{
  border: 1px solid var(--dark-border);
}