/* ══════════════════════════════════════════════════════════════
   APP HEADER - EXACTAMENTE COMO FRAPPE
   ══════════════════════════════════════════════════════════════ */

.app-header {
  background: var(--bg-content); /* 🔥 USAR VARIABLE */
  border-bottom: 1px solid var(--border-light); /* 🔥 USAR VARIABLE */
  /* 🔥 CAMBIAR DE STICKY A FIXED */
  position: fixed;
  top: 0;
  /* 🔥 USAR LAS VARIABLES CSS DEFINIDAS */
  left: var(--sidebar-width); /* Usar variable en lugar de 220px */
  right: 0;
  z-index: 100;
  /* 🔥 USAR LA VARIABLE DE TRANSICIÓN */
  transition: left var(--sidebar-transition);
}

/* 🔥 AJUSTAR CUANDO EL SIDEBAR ESTÁ COLAPSADO */
body.sidebar-collapsed .app-header {
  left: var(--sidebar-width-collapsed); /* Usar variable en lugar de 60px */
}

/* 🔥 EN MÓVIL, OCUPAR TODO EL ANCHO */
@media (max-width: 991.98px) {
  .app-header {
    left: 0;
  }
}

.app-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  height: var(--app-header-height); /* Usar variable */
  max-width: 100%;
  box-sizing: border-box;
}

/* ✅ TÍTULO Y BREADCRUMBS */
.app-title {
  display: flex;
  align-items: center;
  gap: 0; /* 🔥 CAMBIAR: Sin gap, usaremos el separador */
  flex: 1;
}

.app-title h1 {
  /* 🔥 MISMO ESTILO PARA AMBOS TEXTOS */
  font-size: 1rem; /* Reducido para armonía */
  font-weight: 400; /* Normal, no bold */
  color: var(--text-primary); /* 🔥 USAR VARIABLE */
  margin: 0;
  letter-spacing: normal;
  line-height: 1;
}

.app-breadcrumb {
  /* 🔥 MISMO ESTILO QUE EL H1 */
  font-size: 1rem; /* Igual que h1 */
  color: var(--text-secondary); /* 🔥 USAR VARIABLE */
  margin: 0;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* 🔥 SEPARADOR MÁS SUTIL */
.app-breadcrumb::before {
  content: '/';
  margin: 0 0.375rem; /* Menos espacio */
  color: #d1d5db;
  font-weight: 300;
}

/* 🔥 HOVER EFFECT PARA AMBOS */
.app-title h1:hover,
.app-breadcrumb:hover {
  color: #374151;
  cursor: pointer;
}

/* ✅ BOTÓN CREATE COMO FRAPPE */
.app-actions {
  display: flex;
  gap: 0.5rem; /* Reducido de 0.75rem */
  align-items: center;
}

.btn-create {
  /* 🔥 BOTÓN MÁS PEQUEÑO Y SUTIL */
  background: #f3f4f6; /* Gris claro como Frappe */
  color: #374151; /* Texto oscuro */
  border: 1px solid #e5e7eb; /* Borde sutil */
  border-radius: 6px;
  padding: 0.375rem 0.75rem; /* Más pequeño */
  font-size: 0.8125rem; /* Más pequeño */
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  height: 28px; /* Más pequeño */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-create:hover {
  background: #e5e7eb; /* Hover más sutil */
  color: #1f2937;
  transform: none; /* Sin animación de elevación */
  box-shadow: none; /* Sin sombra */
}

/* ✅ CONTENIDO SIN CONFLICTOS */
.content-wrapper {
  background: #ffffff;
  min-height: calc(100vh - var(--app-header-height)); /* Ajustado a la nueva altura */
  /* 🔥 SIN PADDING - CADA PÁGINA CONTROLA SU SPACING */
}

/* ✅ RESPONSIVE */
@media (max-width: 768px) {
  .app-header-content {
    padding: 0.5rem 1rem;
  }
  
  .app-title h1 {
    font-size: 1rem;
  }
  
  .btn-create {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    height: 26px;
  }
}