/* SISTEMA DE DISEÑO GLOBAL PREMIUM - GRUPO TST */
:root {
  --primary: #2563eb;
  --primary-dark: #1e3a8a;
  --success: #10b981;
  --info: #0ea5e9;
  --warning: #f59e0b;
  --danger: #ef4444;
  --sidebar-dark-bg: #0f172a;
  --sidebar-dark-hover-bg: #1e293b;
  --sidebar-dark-color: #cbd5e1;
}

/* TIPOGRAFÍA ESTANDARIZADA */
html {
  font-size: 14px; /* Tamaño base para toda la app */
}

body, .content-wrapper, .main-header, .main-sidebar, .card, .btn, .form-control {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important; /* 14px */
  line-height: 1.5;
  color: #334155;
}

h1, .h1 { font-size: 1.75rem !important; font-weight: 700; }
h2, .h2 { font-size: 1.5rem !important; font-weight: 600; }
h3, .h3 { font-size: 1.25rem !important; font-weight: 600; }
h4, .h4 { font-size: 1.1rem !important; font-weight: 600; }

.text-sm, .small, table, .btn-sm {
  font-size: 0.875rem !important; /* ~12.2px */
}

.text-xs {
  font-size: 0.75rem !important; /* ~10.5px */
}

/* Asegurar que los iconos mantengan su propia fuente para que no desaparezcan */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", sans-serif !important;
}

/* Elevación y suavizado de tarjetas */
.card {
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
}

.card-header {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Para cabeceras de card que usan bg-gradient o bg-primary, quitar el transparent para que mantengan color */
.card-header:not([class*="bg-"]) {
  background-color: transparent !important;
}

/* Botones y controles más modernos */
.btn, .form-control {
  border-radius: 8px !important;
}

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

/* Navbar superior estilo limpio */
.main-header.navbar-white {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

/* Sidebar estilo Premium Oscuro */
.sidebar-dark-primary {
  background-color: var(--sidebar-dark-bg) !important;
}

.main-sidebar .nav-link, 
.main-sidebar .brand-link,
.main-sidebar .nav-header {
  color: var(--sidebar-dark-color) !important;
}

.main-sidebar .nav-link:hover {
  color: #fff !important;
  background-color: var(--sidebar-dark-hover-bg) !important;
}

.main-sidebar .nav-icon {
  color: var(--sidebar-dark-color) !important;
}

.brand-link {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.bg-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
  color: #fff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3) !important;
}

/* Sub-menus del sidebar */
.nav-treeview > .nav-item > .nav-link {
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;
  width: auto;
}
.nav-treeview > .nav-item > .nav-link:hover {
  background-color: var(--sidebar-dark-hover-bg) !important;
}

/* Forzar visibilidad en la barra superior (Navbar) */
.main-header.navbar-light .nav-link {
  color: #334155 !important;
}

.main-header.navbar-light .nav-link:hover {
  color: var(--primary) !important;
}

/* Estilos para las tarjetas del backlog/tablero */
.card-item {
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: grab;
}

/* Contenedor para botones editar y eliminar */
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* Botones genéricos de acción */
.card-actions a {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  text-decoration: none;
  color: white;
  transition: opacity 0.3s ease;
}

.card-actions .edit-btn {
  background-color: var(--info);
}

.card-actions .delete-btn {
  background-color: var(--danger);
}

.card-actions a:hover {
  opacity: 0.8;
}