/* ========================================
   RESET MÍNIMO - PREVENIR OVERFLOW
   ======================================== */

html, body { margin:0; padding:0; box-sizing:border-box; overflow-x:hidden; }
*, *::before, *::after { box-sizing:inherit; }

/* ========================================
   VARIABLES DE COLOR - VALORES ACTUALES
   ======================================== */

:root{
  --camella-azul: #3a8be8;      /* Azul sólido para fondo del header */
  --camella-rojo: #CE1126;      /* Rojo botón - igual que --color-rojo */
  --camella-blanco: #fff;       /* Blanco puro */
  --camella-texto: #002b47;     /* Texto oscuro - igual que azul principal */
}

/* ========================================
   HEADER FIJO - SIEMPRE VISIBLE
   ======================================== */

.site-header{ 
  background:var(--camella-azul); 
  position:fixed; 
  top:0; 
  left:0;
  width:100%;
  z-index:1030; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-container{
  max-width:1200px; 
  margin:0 auto; 
  padding:10px 16px;
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  gap:12px; 
  min-width:0; 
  width:100%;
}

.logo{ 
  display: inline-flex; 
  align-items: center;
  text-decoration: none;
}

.logo img{ 
  height: 40px; 
  width: auto; 
}

.header-actions{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  flex-wrap:nowrap; 
}

.btn{ 
  position:static; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  border-radius:9999px; 
  border:2px solid transparent; 
  padding:10px 16px; 
  font-weight:600; 
  white-space:nowrap;
  text-decoration: none;
}

.btn-publish{ 
  background:var(--camella-rojo); 
  color:var(--camella-blanco); 
}

.btn-login{ 
  background:transparent; 
  color:var(--camella-blanco); 
  border-color:var(--camella-blanco); 
}

.btn-publish:hover{
  background: #a50f1f;
  color: var(--camella-blanco);
}

.btn-login:hover{
  background: var(--camella-blanco);
  color: var(--camella-azul);
}

/* ========================================
   RESPONSIVE SIN OCULTAR BOTONES
   ======================================== */

/* Tablets y pantallas medianas */
@media (max-width: 768px){
  .header-container{ 
    padding: 10px 12px; 
    gap: 10px; 
  }
  .logo img{ 
    height: 36px; /* Reducción gradual desde 40px */
  }
  .header-actions .btn{ 
    padding: 9px 14px; 
    font-size: 15px; 
  }
  .main-content {
    margin-top: 70px !important; /* Ajustar para header más pequeño en tablet */
  }
}

/* Móviles pequeños */
@media (max-width:480px){
  .header-container{ 
    padding: 8px 10px; 
    gap: 8px; 
  }
  .header-actions .btn{ 
    padding: 8px 12px; 
    font-size: 14px; 
  }
  .logo img{ 
    height: 32px; /* Tamaño mínimo para buena visibilidad */
    min-height: 28px; /* Nunca menor a 28px */
    width: auto; /* Mantener proporción */
  }
  .main-content {
    margin-top: 65px !important; /* Ajustar para header móvil */
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 360px){
  .header-container{ 
    padding: 6px 8px; 
    gap: 6px; 
  }
  .header-actions .btn{ 
    padding: 7px 10px; 
    font-size: 13px; 
  }
  .logo img{ 
    height: 30px; /* Mínimo absoluto con buena visibilidad */
    min-height: 28px;
  }
}

/* ========================================
   BLOQUEAR ESTILOS HEREDADOS PROBLEMÁTICOS
   ======================================== */

/* Compensar altura del header fijo */
body{ 
  padding-top:0 !important; 
}

.main-content {
  margin-top: 80px !important; /* Espacio para header fijo (60px header + 20px margen) */
}

/* Prevenir overflow horizontal */
.site-header *{ 
  max-width:100%; 
}

/* Forzar posición estática en botones */
.site-header .btn,
.site-header .btn-login,
.site-header .btn-publish{ 
  position: static !important; 
}

/* Focus visible para accesibilidad */
.header-actions .btn:focus-visible {
  outline: 2px solid var(--camella-blanco);
  outline-offset: 2px;
}

/* ========================================
   ESTILOS PARA USUARIO AUTENTICADO
   ======================================== */

.user-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--camella-blanco);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  white-space: nowrap;
}

.user-info i {
  font-size: 18px;
}

.btn-logout {
  background: rgba(255, 255, 255, 0.2);
  color: var(--camella-blanco);
  border: 2px solid var(--camella-blanco);
  transition: all 0.3s ease;
}

.btn-logout:hover {
  background: var(--camella-blanco);
  color: var(--camella-azul);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-logout i {
  margin-right: 4px;
}

/* Responsive para usuario autenticado */
@media (max-width: 768px) {
  .user-info {
    font-size: 13px;
    padding: 6px 10px;
  }
  
  .user-info i {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .user-info {
    font-size: 12px;
    padding: 6px 8px;
    gap: 4px;
  }
  
  /* Ocultar texto "Salir" en móviles pequeños, solo mostrar icono */
  .btn-logout {
    padding: 8px 10px;
  }
}

@media (max-width: 360px) {
  /* En pantallas muy pequeñas, comprimir más */
  .user-info {
    display: none; /* Ocultar info de usuario en pantallas muy pequeñas */
  }
  
  .btn-logout {
    padding: 7px 9px;
    font-size: 13px;
  }
}