/*
 * he-brand.css — Paleta de marca Hockey Equipment
 * Naranja: #F47920  |  Azul marino: #163560  |  Blanco: #FFFFFF
 * Se carga DESPUÉS de los CSS del template para sobreescribir variables y estilos.
 */

/* ─── CSS Variables globales ──────────────────────────────────────────────── */
:root {
  --he-orange: #F47920;
  --he-navy:   #163560;
  --he-orange-rgb: 244, 121, 32;
  --he-navy-rgb:   22,  53,  96;

  /* Reemplazar primary del template por naranja HE */
  --bs-primary:     #F47920 !important;
  --bs-primary-rgb: 244, 121, 32 !important;
}

/* ─── Botones primarios ───────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:focus {
  background-color: #F47920 !important;
  border-color:     #F47920 !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #d96a18 !important;
  border-color:     #d96a18 !important;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #c45f14 !important;
  border-color:     #c45f14 !important;
}
.btn-outline-primary {
  color: #F47920 !important;
  border-color: #F47920 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: #F47920 !important;
  color: #fff !important;
}

/* ─── Texto y fondo primary ──────────────────────────────────────────────── */
.text-primary { color: #F47920 !important; }
.bg-primary   { background-color: #F47920 !important; }
.bg-label-primary {
  background-color: rgba(244, 121, 32, 0.15) !important;
  color: #F47920 !important;
}
.border-primary { border-color: #F47920 !important; }
a { color: #F47920; }
a:hover { color: #d96a18; }

/* ─── Badges / Pills ─────────────────────────────────────────────────────── */
.badge.bg-primary { background-color: #F47920 !important; }

/* ─── Links activos en tablas y listas ───────────────────────────────────── */
.list-group-item-primary { background-color: rgba(244,121,32,0.15); color: #F47920 !important; }

/* ─── Menú lateral — fondo azul marino ───────────────────────────────────── */
.light-style .bg-menu-theme,
.dark-style  .bg-menu-theme {
  background-color: #163560 !important;
}

/* Textos del menú en blanco */
.light-style .menu-vertical .menu-item .menu-link,
.dark-style  .menu-vertical .menu-item .menu-link {
  color: rgba(255, 255, 255, 0.75) !important;
}
.light-style .menu-vertical .menu-item .menu-link:hover,
.dark-style  .menu-vertical .menu-item .menu-link:hover {
  color: #ffffff !important;
  background-color: rgba(244, 121, 32, 0.15) !important;
}

/* Ítem activo con naranja */
.light-style .menu-vertical .menu-item.active > .menu-link,
.dark-style  .menu-vertical .menu-item.active > .menu-link {
  background-color: #F47920 !important;
  color: #ffffff !important;
  border-radius: 6px;
}
.light-style .menu-vertical .menu-item.active > .menu-link i,
.dark-style  .menu-vertical .menu-item.active > .menu-link i {
  color: #ffffff !important;
}

/* Íconos del menú en blanco */
.light-style .menu-vertical .menu-link i,
.dark-style  .menu-vertical .menu-item .menu-link i {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Menu header (separadores de sección) */
.light-style .menu-vertical .menu-header .menu-header-text,
.dark-style  .menu-vertical .menu-header .menu-header-text {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Divider del menú */
.light-style .bg-menu-theme .menu-divider,
.dark-style  .bg-menu-theme .menu-divider {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Scroll shadow inner */
.light-style .menu-vertical .menu-inner-shadow,
.dark-style  .menu-vertical .menu-inner-shadow {
  background: linear-gradient(#163560 5%, rgba(22, 53, 96, 0)) !important;
}

/* ─── App brand (logo en la barra lateral) ───────────────────────────────── */
.app-brand-text.demo {
  color: #ffffff !important;
}
.light-style .layout-menu .app-brand.demo,
.dark-style  .layout-menu .app-brand.demo {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* ─── Navbar superior ────────────────────────────────────────────────────── */
.light-style .layout-navbar,
.dark-style  .layout-navbar {
  border-bottom: 2px solid rgba(244, 121, 32, 0.25) !important;
}

/* ─── Inputs con foco ────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: #F47920 !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 121, 32, 0.25) !important;
}

/* ─── Select2 con foco ───────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #F47920 !important;
  box-shadow: 0 0 0 0.2rem rgba(244, 121, 32, 0.25) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background-color: #F47920 !important;
}

/* ─── Paginación DataTables ──────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #F47920 !important;
  border-color: #F47920 !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(244, 121, 32, 0.12) !important;
  border-color: transparent !important;
  color: #F47920 !important;
}

/* ─── Toggle slider / checkboxes ────────────────────────────────────────── */
.form-check-input:checked {
  background-color: #F47920 !important;
  border-color:     #F47920 !important;
}

/* ─── Card header accent ─────────────────────────────────────────────────── */
.card-header h3,
.card-header h4 {
  color: #163560;
}
.dark-style .card-header h3,
.dark-style .card-header h4 {
  color: #F47920;
}

/* ─── Scrollbar del menú ─────────────────────────────────────────────────── */
.light-style .menu-vertical .ps__thumb-y,
.dark-style  .menu-vertical .ps__thumb-y {
  background-color: rgba(244, 121, 32, 0.6) !important;
}

/* ─── Logo sidebar: ajuste de tamaño ────────────────────────────────────── */
.app-brand-logo.demo {
  width: auto !important;
  height: 36px !important;
}
.app-brand-logo.demo img {
  width: auto !important;
  height: 36px !important;
  max-width: 130px;
  object-fit: contain;
}

/* ─── SweetAlert2 — botones (el tema Sneat agrega .btn .btn-primary/.btn-label-secondary) ── */

/* Confirm — cubre .swal2-styled.swal2-confirm y también .btn.btn-primary añadido por Sneat */
.swal2-styled.swal2-confirm,
.swal2-actions .swal2-confirm,
.swal2-actions button.swal2-confirm {
  background-color: #F47920 !important;
  background-image: none !important;
  border-color:     #F47920 !important;
  color:            #fff    !important;
}
.swal2-styled.swal2-confirm:hover,
.swal2-actions .swal2-confirm:hover {
  background-color: #d96a18 !important;
  border-color:     #d96a18 !important;
  color:            #fff    !important;
}
.swal2-styled.swal2-confirm:focus,
.swal2-actions .swal2-confirm:focus {
  background-color: #d96a18 !important;
  color:            #fff    !important;
  box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.4) !important;
}

/* Cancel — cubre .swal2-styled.swal2-cancel y también .btn.btn-label-secondary añadido por Sneat */
.swal2-styled.swal2-cancel,
.swal2-actions .swal2-cancel,
.swal2-actions button.swal2-cancel {
  background-color: #6c757d !important;
  background-image: none    !important;
  border-color:     #6c757d !important;
  color:            #fff    !important;
}
.swal2-styled.swal2-cancel:hover,
.swal2-actions .swal2-cancel:hover {
  background-color: #5c636a !important;
  color:            #fff    !important;
}
.swal2-styled.swal2-cancel:focus,
.swal2-actions .swal2-cancel:focus {
  background-color: #5c636a !important;
  color:            #fff    !important;
  box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.4) !important;
}

/* Deny */
.swal2-styled.swal2-deny,
.swal2-actions .swal2-deny {
  background-color: #dc3545 !important;
  background-image: none    !important;
  border-color:     #dc3545 !important;
  color:            #fff    !important;
}

/* Neutralizar colores que el tema Bootstrap (.btn, .btn-primary, .btn-label-secondary) pueda inyectar */
.swal2-actions .btn {
  color: inherit !important;
}
.swal2-actions .btn-primary,
.swal2-actions .btn-primary:hover,
.swal2-actions .btn-primary:focus {
  color:            #fff    !important;
  background-color: #F47920 !important;
  border-color:     #F47920 !important;
}
.swal2-actions .btn-label-secondary,
.swal2-actions .btn-label-secondary:hover,
.swal2-actions .btn-label-secondary:focus {
  color:            #fff    !important;
  background-color: #6c757d !important;
  border-color:     #6c757d !important;
}
.swal2-actions .btn-label-danger,
.swal2-actions .btn-label-danger:hover {
  color:            #fff    !important;
  background-color: #dc3545 !important;
  border-color:     #dc3545 !important;
}

/* Popup de error */
.swal2-icon.swal2-error { border-color: #dc3545 !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #dc3545 !important; }
