/* WinnerMax estilos adicionales */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:1rem;z-index:1000;}
.modal .modal-dialog{background:#fff;border-radius:.5rem;max-width:600px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:calc(100vh - 2rem);overflow-y:auto;}
.modal .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #e5e7eb;}
.modal .modal-body{padding:1rem;}
.modal .modal-footer{display:flex;gap:.5rem;justify-content:flex-end;padding:1rem;border-top:1px solid #e5e7eb;}
.modal .btn-close{background:transparent;border:0;font-size:1.25rem;cursor:pointer;}
.alert{padding:.5rem .75rem;border:1px solid #e5e7eb;background:#fff;border-left-width:.25rem;border-left-color:#0d6efd;border-radius:.375rem;margin-bottom:1rem;}
.brand-title{font-weight:800;letter-spacing:.5px;}
.logo{height:40px;}
.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;}
.footer{text-align:center;margin-top:2rem;color:#6c757d;}
.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:#f1f5f9;color:#111827;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;}

/* ====== Paleta de marca Combo Señorial (azules y rojos) ====== */
:root{
  /* Colores base de marca */
  --brand-blue: #1D4ED8;       /* azul vivo */
  --brand-blue-dark: #1E40AF;  /* azul profundo */
  --brand-blue-darker: #172554; /* azul más oscuro para fondos */
  --brand-blue-50: #EFF6FF;    /* azul muy claro para fondos */
  --brand-red: #EF4444;        /* rojo vivo */
  --brand-red-dark: #DC2626;   /* rojo profundo */
  --brand-red-50: #FEF2F2;     /* rojo muy claro para acentos suaves */
  --brand-green: #10B981;      /* verde vivo para éxito */
  --brand-green-dark: #059669; /* verde profundo para éxito */

  /* Overrides Bootstrap para usar la marca */
  --bs-primary: var(--brand-blue);
  --bs-primary-rgb: 29, 78, 216;
  --bs-secondary: var(--brand-red);
  --bs-secondary-rgb: 239, 68, 68;
  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: var(--brand-blue-dark);
}

/* ====== Botón base (afecta login y acciones generales) ====== */
.btn{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  border-color: var(--brand-blue-dark);
}
.btn:hover,
.btn:focus{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
  border-color: var(--brand-blue);
}

/* ====== Botones con colores de marca ====== */
.btn-primary{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  border-color: var(--brand-blue-dark);
}
.btn-primary:hover,
.btn-primary:focus{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue) 100%);
  border-color: var(--brand-blue);
}

.btn-secondary{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
  border-color: var(--brand-red-dark);
}
.btn-secondary:hover,
.btn-secondary:focus{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-red-dark) 0%, var(--brand-red) 100%);
  border-color: var(--brand-red);
}

/* Éxito (verde) */
.btn-success{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  border-color: var(--brand-green-dark);
}
.btn-success:hover,
.btn-success:focus{
  color:#fff;
  background: linear-gradient(135deg, var(--brand-green-dark) 0%, var(--brand-green) 100%);
  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(--brand-blue-darker) !important; /* azul más oscuro para el fondo */
  border-right: 4px solid var(--brand-red);
  padding: 1rem;
  color:#fff;
}
.sidebar .platform-title{color:#fff;}
.sidebar .badge{background: rgba(255,255,255,.18); color:#fff;}
.sidebar a{ color:#fff !important; }
.sidebar .nav .btn{
  margin-bottom:.5rem;
  font-weight:700;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important; /* siempre rojo */
  color:#fff !important;
  border:1px solid var(--brand-red-dark) !important;
}
.sidebar .nav .btn:hover,
.sidebar .nav .btn.active{
  background: linear-gradient(135deg, var(--brand-red-dark) 0%, var(--brand-red) 100%) !important;
  color:#fff !important;
  border-color: var(--brand-red) !important;
}
.sidebar .nav .btn.btn-secondary{
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important;
  border-color: var(--brand-red-dark) !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-red) !important;} 

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

.table thead th{
  background: var(--brand-blue-50);
  color: var(--brand-blue-dark);
}

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

/* Acentos y detalles */
.brand-title{color: var(--brand-blue-dark);} /* reforzar título superior */
.alert{border-left-color: var(--brand-blue);} /* acento en alertas */

/* ====== Login: títulos en rojo ====== */
.login .brand-title{color: var(--brand-red) !important;}
.login .card-title{color: var(--brand-red) !important;}
/* Botón de acción y enlace Bytecrafter en rojo */
.login .btn{
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important;
  border-color: var(--brand-red-dark) !important;
}
.login .btn:hover,
.login .btn:focus{
  background: linear-gradient(135deg, var(--brand-red-dark) 0%, var(--brand-red) 100%) !important;
  border-color: var(--brand-red) !important;
}
.login .small a{color: var(--brand-red) !important;}
.login .small a:hover,
.login .small a:focus{color: var(--brand-red-dark) !important;}