/*=========================================================================
  SISCCAT — TEMA UNIFICADO
  Sistema de Gestión y Administración Tributaria de IMAGUA
  Sobreescribe AdminLTE con paleta consistente azul naval
  =========================================================================*/

/* --- PALETA DE COLORES --- */
:root {
  --sisccat-primary: #001f3f;
  --sisccat-primary-hover: #002d5c;
  --sisccat-primary-light: #e8f0fe;
  --sisccat-secondary: #6c757d;
  --sisccat-success: #28a745;
  --sisccat-danger: #dc3545;
  --sisccat-warning: #ffc107;
  --sisccat-info: #17a2b8;
  --sisccat-dark: #343a40;
  --sisccat-light: #f8f9fa;
  --sisccat-accent: #ff8c00;
  --sisccat-sidebar-bg: #001427;
  --sisccat-header-bg: #001f3f;
  --sisccat-footer-bg: #001427;
}

/* ========================================================================
   CARDS — Estilo unificado
   ======================================================================== */

.card-sisccat {
  border-top: 3px solid var(--sisccat-primary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-radius: 4px;
}

.card-sisccat .card-header {
  background-color: var(--sisccat-primary);
  border-bottom: none;
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-sisccat .card-header .card-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
  color: white;
}

/* Card header con color sólido (más compacto) */
.card-header-solid {
  background-color: var(--sisccat-primary) !important;
  color: white !important;
  border-bottom: none;
  padding: 0.6rem 1.25rem;
}

.card-header-solid .card-title {
  color: white !important;
  font-weight: 600;
  font-size: 1rem;
}

/* Card outline */
.card-outline-sisccat {
  border-top: 3px solid var(--sisccat-primary);
}

/* Card hover effect */
.card-hover:hover {
  box-shadow: 0 4px 12px rgba(0,31,63,0.15);
  transition: box-shadow 0.2s ease;
}

/* ========================================================================
   BUTTONS — Estilo unificado
   ======================================================================== */

.btn-sisccat {
  background-color: var(--sisccat-primary);
  border-color: var(--sisccat-primary);
  color: white;
}

.btn-sisccat:hover {
  background-color: var(--sisccat-primary-hover);
  border-color: var(--sisccat-primary-hover);
  color: white;
}

.btn-sisccat-outline {
  color: var(--sisccat-primary);
  border-color: var(--sisccat-primary);
  background-color: transparent;
}

.btn-sisccat-outline:hover {
  background-color: var(--sisccat-primary);
  color: white;
}

/* ========================================================================
   HEADER / NAVBAR
   ======================================================================== */

.main-header.navbar-sisccat {
  background-color: var(--sisccat-header-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.main-header.navbar-sisccat .nav-link {
  color: rgba(255,255,255,0.85) !important;
}

.main-header.navbar-sisccat .nav-link:hover {
  color: white !important;
}

/* ========================================================================
   SIDEBAR
   ======================================================================== */

.main-sidebar.sidebar-sisccat {
  background-color: var(--sisccat-sidebar-bg) !important;
}

.sidebar-sisccat .nav-sidebar .nav-header {
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
}

.sidebar-sisccat .nav-sidebar .nav-item .nav-link {
  color: rgba(255,255,255,0.7);
  border-radius: 0;
  padding: 0.5rem 1rem;
}

.sidebar-sisccat .nav-sidebar .nav-item .nav-link:hover {
  color: white;
  background-color: rgba(255,255,255,0.05);
}

.sidebar-sisccat .nav-sidebar .nav-item .nav-link.active {
  color: white;
  background-color: var(--sisccat-primary-hover);
  border-left: 3px solid var(--sisccat-accent);
}

/* ========================================================================
   TABLES — DataTables
   ======================================================================== */

.table-sisccat thead {
  background-color: var(--sisccat-primary);
  color: white;
}

.table-sisccat thead th {
  border-bottom: none;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.6rem 0.75rem;
}

.table-sisccat tbody tr:hover {
  background-color: var(--sisccat-primary-light);
}

/* ========================================================================
   BADGES — Estilo unificado
   ======================================================================== */

.badge-sisccat {
  background-color: var(--sisccat-primary);
  color: white;
  padding: 0.3em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 10px;
}

.badge-sisccat-success {
  background-color: var(--sisccat-success);
  color: white;
}

.badge-sisccat-danger {
  background-color: var(--sisccat-danger);
  color: white;
}

.badge-sisccat-warning {
  background-color: var(--sisccat-warning);
  color: #212529;
}

/* ========================================================================
   TABS — Unificadas
   ======================================================================== */

.nav-tabs-sisccat .nav-link {
  color: var(--sisccat-primary);
  font-weight: 500;
  border: none;
  padding: 0.5rem 1rem;
  margin-right: 2px;
}

.nav-tabs-sisccat .nav-link.active {
  color: white;
  background-color: var(--sisccat-primary);
  border-radius: 4px 4px 0 0;
}

.nav-tabs-sisccat .nav-link:hover:not(.active) {
  background-color: var(--sisccat-primary-light);
  border-radius: 4px 4px 0 0;
}

/* ========================================================================
   FORM ELEMENTS
   ======================================================================== */

.form-control:focus {
  border-color: var(--sisccat-primary);
  box-shadow: 0 0 0 0.2rem rgba(0,31,63,0.15);
}

select.form-control,
select.form-control:focus {
  color: #212529;
  border-color: var(--sisccat-primary);
}

/* ========================================================================
   PAGINATION
   ======================================================================== */

.page-item.active .page-link {
  background-color: var(--sisccat-primary);
  border-color: var(--sisccat-primary);
}

.page-link {
  color: var(--sisccat-primary);
}

.page-link:hover {
  color: var(--sisccat-primary-hover);
}

/* ========================================================================
   MODAL — Unificado
   ======================================================================== */

.modal-header-sisccat {
  background-color: var(--sisccat-primary);
  color: white;
  border-bottom: none;
}

.modal-header-sisccat .close {
  color: white;
  opacity: 0.8;
}

.modal-header-sisccat .close:hover {
  opacity: 1;
}

/* ========================================================================
   FOOTER
   ======================================================================== */

.main-footer.footer-sisccat {
  background-color: var(--sisccat-footer-bg) !important;
  color: rgba(255,255,255,0.7) !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.main-footer.footer-sisccat a {
  color: var(--sisccat-accent);
}

/* ========================================================================
   ALERTAS / NOTIFICACIONES
   ======================================================================== */

.alert-sisccat {
  border-left: 4px solid var(--sisccat-primary);
  background-color: var(--sisccat-primary-light);
}

/* ========================================================================
   PROGRESS BARS
   ======================================================================== */

.progress-bar-sisccat {
  background-color: var(--sisccat-primary);
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

.text-sisccat {
  color: var(--sisccat-primary) !important;
}

.bg-sisccat {
  background-color: var(--sisccat-primary) !important;
  color: white !important;
}

.border-sisccat {
  border-color: var(--sisccat-primary) !important;
}

.border-left-sisccat {
  border-left: 4px solid var(--sisccat-primary) !important;
}

.border-top-sisccat {
  border-top: 3px solid var(--sisccat-primary) !important;
}

/* ========================================================================
   LOADING SPINNER
   ======================================================================== */

.spinner-sisccat {
  border: 3px solid var(--sisccat-primary-light);
  border-top: 3px solid var(--sisccat-primary);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin-sisccat 0.8s linear infinite;
}

@keyframes spin-sisccat {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================================================
   ESTADOS DE REGISTROS (Activo/Inactivo/Suspendido)
   ======================================================================== */

.status-active {
  background-color: #28a745;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-inactive {
  background-color: #dc3545;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-pending {
  background-color: #ffc107;
  color: #212529;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ========================================================================
   SIDEBAR USER PANEL
   ======================================================================== */

.user-panel-sisccat {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 1rem;
}

.user-panel-sisccat .info {
  color: rgba(255,255,255,0.8);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 768px) {
  .card-sisccat .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-sisccat .card-header .card-tools {
    margin-top: 0.5rem;
  }
  
  /* Fix select text color inside card headers */
.card-sisccat .card-header select.form-control {
  color: #212529;
  background-color: #f0f0f0;
}

.card-sisccat .card-header .select2-container--default .select2-selection--single {
  background-color: #f0f0f0;
}

.card-sisccat .card-header .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #212529 !important;
}

.card-sisccat .card-body select.form-control,
.card-sisccat .card-body .select2-container--default .select2-selection--single {
  background-color: #f0f0f0;
}

.card-sisccat .card-body select.form-control {
  color: #212529;
}

/* Fix select2 text color */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #212529 !important;
}

.select2-container--default .select2-results__option {
  color: #212529 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  color: #212529 !important;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */
.bg-sisccat { background-color: var(--sisccat-primary) !important; color: white !important; }
.text-sisccat { color: var(--sisccat-primary) !important; }
.border-left-sisccat { border-left: 4px solid var(--sisccat-primary) !important; }
.thead-sisccat { background-color: var(--sisccat-primary) !important; color: white !important; }
.thead-sisccat th { color: white !important; border-color: rgba(255,255,255,0.15) !important; }

/* Sobrescritura AdminLTE para tablas */
.table-bordered thead.thead-sisccat th { border-color: rgba(255,255,255,0.15) !important; }