/* ===== VARIABLES GLOBALES ===== */
:root {
  --color-principal: #00829b;  /* PANTONE 7712 - Teal */
  --color-principal-rgb: 0, 130, 155;
  --color-secundario: #515a5d;  /* Gris corporativo */
  --color-secundario-rgb: 81, 90, 93;
  --color-fondo: #f8f9fa;
  --color-texto: #333333;
  --color-exito: #28a745;
  --color-peligro: #dc3545;
}

/* ===== SIDEBAR (CORREGIDO PARA COREUI) ===== */
.c-sidebar {
  background: linear-gradient(180deg, #004d5c 0%, var(--color-principal) 100%) !important;
}

.c-sidebar .c-sidebar-nav-link,
.c-sidebar .c-sidebar-nav-dropdown-toggle {
  color: rgba(255, 255, 255, 0.8) !important;
}

.c-sidebar .c-sidebar-nav-link:hover,
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover,
.c-sidebar .c-sidebar-nav-link.active,
.c-sidebar .c-sidebar-nav-dropdown-toggle.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.c-sidebar .c-sidebar-nav-icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ===== HEADER ===== */
.c-header {
  background-color: white !important;
  border-bottom: 3px solid var(--color-principal) !important;
}

/* ===== BOTONES ===== */
.btn-primary {
  background-color: var(--color-principal) !important;
  border-color: var(--color-principal) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: #006580 !important;
  border-color: #006580 !important;
}

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

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

/* ===== TARJETAS ===== */
.card {
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
}

.card-header {
  background-color: white !important;
  border-bottom: 2px solid var(--color-principal) !important;
}

/* Números grandes de KPIs */
.card .h2, .card h2, .display-4 {
  color: var(--color-texto) !important;
  font-weight: bold !important;
}

/* Porcentajes de cambio */
.text-success, .badge-success {
  color: var(--color-exito) !important;
}

.text-danger, .badge-danger {
  color: var(--color-peligro) !important;
}

/* ===== TABLAS ===== */
.table thead th {
  background-color: var(--color-principal) !important;
  color: white !important;
  border-bottom: none !important;
}

.table tbody tr:hover {
  background-color: rgba(var(--color-principal-rgb), 0.05) !important;
}

/* ===== FILTROS Y CONTROLES ===== */
.form-control:focus,
.custom-select:focus {
  border-color: var(--color-principal) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-principal-rgb), 0.25) !important;
}

/* ===== PAGINACIÓN ===== */
.pagination .page-item.active .page-link {
  background-color: var(--color-principal) !important;
  border-color: var(--color-principal) !important;
}

.pagination .page-link {
  color: var(--color-principal) !important;
}

/* ===== TEXTO DESTACADO ===== */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-weight: 600 !important;
}

/* ===== TIPOGRAFÍA EIGHTH ONE ===== */
@font-face {
  font-family: 'Eighth One';
  src: url('/assets/fonts/Eight One.woff2') format('woff2'),
       url('/assets/fonts/Eight One.woff') format('woff'),
       url('/assets/fonts/Eight One.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Aplicar la fuente a títulos y elementos del menú */
h1, h2, h3, h4, .c-sidebar-nav-link {
  font-family: 'Eighth One', sans-serif !important;
}
/* ===== TARJETAS DE KPI - DISEÑO MODERNO ===== */

/* Contenedor de las tarjetas - opcional si quieres espaciado */
.row.cards-container, .kpi-row {
  gap: 1.5rem !important;
  padding: 0.5rem !important;
}

/* Estilo base de cada tarjeta */
.card.kpi-card, div[class*="card"][class*="kpi"] {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 
    0 10px 30px -5px rgba(0, 130, 155, 0.1),
    0 0 0 1px rgba(0, 130, 155, 0.05) inset !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Efecto de brillo sutil en el borde superior */
.card.kpi-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #00829b, #00b4d8, #00829b) !important;
  background-size: 200% 100% !important;
  animation: gradientMove 3s ease infinite !important;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover effect */
.card.kpi-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 
    0 20px 40px -10px rgba(0, 130, 155, 0.3),
    0 0 0 1px rgba(0, 130, 155, 0.1) inset !important;
}

/* Icono de la tarjeta (si existe) */
.card.kpi-card .card-icon,
.card.kpi-card i[class*="icon"] {
  font-size: 2.5rem !important;
  color: #00829b !important;
  opacity: 0.2 !important;
  position: absolute !important;
  bottom: 10px !important;
  right: 15px !important;
  transform: rotate(-5deg) !important;
}

/* Contenido de la tarjeta */
.card.kpi-card .card-body,
.card.kpi-card .kpi-content {
  padding: 1.5rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Título del KPI */
.card.kpi-card .card-title,
.card.kpi-card .kpi-label {
  color: #515a5d !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  opacity: 0.8 !important;
}

/* Valor principal */
.card.kpi-card .card-value,
.card.kpi-card .kpi-value {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}

/* Contenedor del cambio porcentual */
.card.kpi-card .kpi-change {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.4rem 1rem !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  margin-top: 0.5rem !important;
  background: rgba(0, 130, 155, 0.05) !important;
  border: 1px solid rgba(0, 130, 155, 0.1) !important;
}

/* Cambio positivo */
.card.kpi-card .kpi-change.positive,
.card.kpi-card .text-success {
  background: rgba(40, 167, 69, 0.1) !important;
  color: #28a745 !important;
  border-color: rgba(40, 167, 69, 0.2) !important;
}

/* Cambio negativo */
.card.kpi-card .kpi-change.negative,
.card.kpi-card .text-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
  border-color: rgba(220, 53, 69, 0.2) !important;
}

/* Añadir flechitas indicadoras */
.card.kpi-card .kpi-change.positive::before {
  content: "▲" !important;
  margin-right: 4px !important;
  font-size: 0.8rem !important;
}

.card.kpi-card .kpi-change.negative::before {
  content: "▼" !important;
  margin-right: 4px !important;
  font-size: 0.8rem !important;
}

/* Para el texto de cambio que está fuera del badge */
.card.kpi-card .text-success,
.card.kpi-card .text-danger {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 700 !important;
}

/* Animación de entrada */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card.kpi-card {
  animation: cardFadeIn 0.5s ease-out forwards !important;
}

/* Efecto de cristal para las tarjetas (opcional, si quieres algo más trendy) */
.card.kpi-card.glass-effect {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
/* ===== LOGIN PAGE - CORRECCIÓN LOGO ===== */

.app-header .navbar-brand {
    width: 180px !important;
    height: 50px !important;
    padding: 5px 15px !important;
}

.app-header .navbar-brand img,
.sidebar-brand img,
img[src*="logo"] {
    max-width: 160px !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}